前段时间因项目需要实现一个能直观的表达出商品流向的功能。当初考虑了,SVG和VML以及生成图片来显示,因为系统一般在IE下使用,最后采用了VML实现,下面是实现后的几张贴图。
由于时间比较仓促只实现了基本功能没有细化,看起来比较粗糙。
下面主要简述下实现的思路及主要代码,废话不多说代码贴上。
线及长方形的显示主要是由几个DTO来描述:
//矩形DTO
public class RectangleDTO {
private double left;//矩形图左起点
private double top;//矩形图顶点
private double width;//矩形宽度
private String enterpriseName;//图形名称
private String rectangleColor;//矩形底色
private String characterColor;//字体颜色
private double lineX;//从矩形图引出线的X坐标
private double lineY;//从矩形图引出线的Y坐标
public double getLeft() {
return left;
}
public void setLeft(double left) {
this.left = left;
}
public double getTop() {
return top;
}
public void setTop(double top) {
this.top = top;
}
public double getWidth() {
return width;
}
public void setWidth(double width) {
this.width = width;
}
public String getEnterpriseName() {
return enterpriseName;
}
public void setEnterpriseName(String enterpriseName) {
this.enterpriseName = enterpriseName;
}
public String getRectangleColor() {
return rectangleColor;
}
public void setRectangleColor(String rectangleColor) {
this.rectangleColor = rectangleColor;
}
public String getCharacterColor() {
return characterColor;
}
public void setCharacterColor(String characterColor) {
this.characterColor = characterColor;
}
public double getLineX() {
return lineX;
}
public void setLineX(double lineX) {
this.lineX = lineX;
}
public double getLineY() {
return lineY;
}
public void setLineY(double lineY) {
this.lineY = lineY;
}
}
//细化下矩形的点,为线的起始点做准备
public class RectangleAllDTO extends RectangleDTO{
private double leftX;//矩形框左中点X坐标
private double leftY;//矩形框左中点Y坐标
private double rightX;//矩形框右中点X坐标
private double rightY;//矩形框右中点Y坐标
public double getLeftX() {
return leftX;
}
public void setLeftX(double leftX) {
this.leftX = leftX;
}
public double getLeftY() {
return leftY;
}
public void setLeftY(double leftY) {
this.leftY = leftY;
}
public double getRightX() {
return rightX;
}
public void setRightX(double rightX) {
this.rightX = rightX;
}
public double getRightY() {
return rightY;
}
public void setRightY(double rightY) {
this.rightY = rightY;
}
}
//连线的DTO
public class LineDTO {
private double startX;//起点X坐标
private double startY;//起点Y坐标
private double endX;//终点X坐标
private double endY;//终点Y坐标
private double controlX;//为绘曲线的控制点X坐标
private double controlY;//为绘曲线的控制点Y坐标
private double contentLeft;//内容文字左起点
private double contentTop;//内容文字顶点
private String content;//内容文字
private double contentWidth;//文字宽度
private double contentHeight;//文字高度
private String lineColor;//曲线颜色
private List contentList = new ArrayList();//文字内容列表
public void addContent(LineContentDTO object){
this.contentList.add(object);
}
public double getStartX() {
return startX;
}
public void setStartX(double startX) {
this.startX = startX;
}
public double getStartY() {
return startY;
}
public void setStartY(double startY) {
this.startY = startY;
}
public double getEndX() {
return endX;
}
public void setEndX(double endX) {
this.endX = endX;
}
public double getEndY() {
return endY;
}
public void setEndY(double endY) {
this.endY = endY;
}
public double getControlX() {
return controlX;
}
public void setControlX(double controlX) {
this.controlX = controlX;
}
public double getControlY() {
return controlY;
}
public void setControlY(double controlY) {
this.controlY = controlY;
}
public double getContentLeft() {
return contentLeft;
}
public void setContentLeft(double contentLeft) {
this.contentLeft = contentLeft;
}
public double getContentTop() {
return contentTop;
}
public void setContentTop(double contentTop) {
this.contentTop = contentTop;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public double getContentWidth() {
return contentWidth;
}
public void setContentWidth(double contentWidth) {
this.contentWidth = contentWidth;
}
public String getLineColor() {
return lineColor;
}
public void setLineColor(String lineColor) {
this.lineColor = lineColor;
}
public List getContentList() {
return contentList;
}
public void setContentList(List contentList) {
this.contentList = contentList;
}
public double getContentHeight() {
return contentHeight;
}
public void setContentHeight(double contentHeight) {
this.contentHeight = contentHeight;
}
}
//线上文字的DTO
public class LineContentDTO {
private double left;//文字内容左起点
private double top; //文字内容顶点
private double width;//文字内容在页面上所占宽度
private String content;//文字具体内容
public double getLeft() {
return left;
}
public void setLeft(double left) {
this.left = left;
}
public double getTop() {
return top;
}
public void setTop(double top) {
this.top = top;
}
public double getWidth() {
return width;
}
public void setWidth(double width) {
this.width = width;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
页面先生成矩形然后在生成连线,矩形的位置和连线的起始点根据自己的业务需求计算出来,这里就不在叙述。页面显示主要代码:
<div id="Graph_layer" style="position:absolute;z-index:1; left: 30px; top: 0px;">
<#list rectangleList as rectangle>
<v:RoundRect id="_x0000_s00201"
style="position:absolute;left:${rectangle.left?string('#.##')}px;top:${rectangle.top?string('#.##')}px;width:${rectangle.width?string('#.##')}px;height:20px;z-index:1"
fillcolor="${rectangle.rectangleColor}" strokeweight="1px" strokecolor="#5E80A4"
arcsize="0.1">
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
</v:RoundRect>
<v:shape inset="0px,0px,0px,0px" id="_x0000_s1025"
style="position:absolute;left:${rectangle.left?string('#.##')}px;top:${rectangle.top?string('#.##')}px;width:${rectangle.width?string('#.##')}px;height:30px;z-index:1;text-align:center">
<v:textbox><!-- <a onclick="forward('${rectangle.url}')" href="#" title="点击查看详细信息">--><span
class="nameStyle"
style="color:${rectangle.characterColor}">${rectangle.enterpriseName}</span></a></v:textbox>
</v:shape>
</#list>
<#list lineList as line>
<v:rect id="_x0000_s1044"
style="position:absolute;left:${(line.startX-3)?string('#.##')}px;top:${(line.startY-3)?string('#.##')}px;width:6px;height:6px;z-index:1"
filled="f" strokecolor="#436589"></v:rect>
<v:rect id="_x0000_s1044"
style="position:absolute;left:${(line.endX-3)?string('#.##')}px;top:${(line.endY-3)?string('#.##')}px;width:6px;height:6px;z-index:1"
filled="f" strokecolor="#436589"></v:rect>
<v:curve style="position:absolute;left:0px;top:0px;z-index:1"
from="${line.startX?string('#.##')}px,${line.startY?string('#.##')}px"
to="${line.endX?string('#.##')}px,${line.endY?string('#.##')}px" filled="f"
control1="${line.controlX?string('#.##')}px,${line.controlY?string('#.##')}px"
onclick="javascript:controlCase(this)"
strokecolor="${line.lineColor}" strokeweight="1.0px">
<v:stroke opacity="1" startarrow="none" endarrow="block" endarrowwidth="medium" endarrowlength="long"/>
</v:curve>
<v:rect id="_x0000_s1040"
style="position:absolute;left:${line.contentLeft?string('#.##')}px;top:${line.contentTop?string('#.##')}px;width:${line.contentWidth?string('#.##')}px;height:${line.contentHeight?string('#.##')}px;z-index:1"
fillcolor="#FFFFFF" stroked="f">
<v:fill type="frame" opacity="0.0"/>
</v:rect>
<v:shape inset="0px,0px,0px,0px" id="_x0000_s1025"
style="position:absolute;left:${line.contentLeft?string('#.##')}px;top:${line.contentTop?string('#.##')}px;width:${line.contentWidth?string('#.##')}px;height:${line.contentHeight?string('#.##')}px;z-index:1;text-align:left">
<v:textbox inset="0px,0px,0px,0px"><span class="lineContentStyle">${line.content}</span></v:textbox>
</v:shape>
</#list>
</div>
上面的是生成图形主要VML代码。在实现的过程中主要是参考了两个教程,下面也贴出来,喜欢的朋友拿去研究研究。
PS:在实现的过程中想把显示的数字放置到线的中点处,探究发现VML中的曲线是贝塞尔曲线,关于更多的贝塞尔曲线可以参考维基百科。
- 大小: 14.1 KB
- 大小: 23 KB
分享到:
相关推荐
vml实现的柱状图,饼状图,很绚丽,不需要其他东西支持,易用
环境:sqlserver2005,vs2008。 说明:利用sql.sql创建数据库,所有东西在NewFolder1文件夹中,可以浏览其... 功能:从xml文件中读取对象(obj),然后再去数据库读取对象关系,利用vml在IE中展示对象关系,支持拖拽。
vml实现圆角表格,非常实用
vml 实现的饼状图直接调用即可,无须任何处理,快速构建报表
VML实现工作流
在web页面通过vml画图,如显示cpu使用率,内存使用率等等,动态绘制曲线和图形
利用VML标记语言画图、动画制作利用VML标记语言画图、动画制作
使用vml封装的流程图控件,颜色大写可自动控制。
vml类的js,方便使用vml实现画图 js源代码,可以在任何平台上使用,简单,方便
用vml画饼状图用vml画饼状图用vml画饼状图用vml画饼状图
基于EXT vml的流程图的实现
vml实例,实现画流程!vml实例,实现画流程
VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的,在我认为, VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML,其中的文本...
vml入门 vml教程 vml参考 vml实例 从网络上收集的各种vml实例.方便vml入门人员. 也有各种vml图形
vml柱状图 vml html jquery
VML实例VML实例VML实例VML实例VML实例VML实例VML实例VML实例
基于VB.NET和JavaScript语言实现了DXF文件的信息提取和IE上矢量图形的动态生成。实例结果表明,该方法不但可以有效地保留图元信息,而且缩放、旋转等变换不影响图象质量,生成的文件小,处理速度快。对构建工程图形的...
实现了vml+html中显示的,并解决了ie浏览器兼容的问题,代码直接运行便好用