浅谈如何用Javascript+VML实现流程设计器

VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为，VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。

VML的全称是VectorMarkupLanguage(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。显然只有IE支持。

此例使用Javascript+VML实现

VML画线段：

Line是做图中最常用的，它有两个特殊的属性from和to,就是起始点和终止点坐标。

 
 
 

  
  
  
<v:linefromv:linefrom="0,0"to="100,50"style="position:relative;"/> 
 
 
 

◆如果要改变线的样式，LineStyle(Stroke)属性可以做到:

Single(默认)，ThinThin，ThinThick，ThickBetweenThin

◆如果要改变线的类型，可以用DashStyle(Stroke)属性:

 
 
 

  
  
  
<v:linestylev:linestyle="position:relative"from="0,0"to="100,0"> 
  
  
  
<v:strokedashstylev:strokedashstyle="Dot"/> 
  
  
  
 
  
  
  
 
  
  
  
Solid(默认):见上图  
  
  
  
ShortDash:  
  
  
  
ShortDot:  
  
  
  
ShortDashDot:  
  
  
  
ShortDashDotDot:  
  
  
  
Dot:  
  
  
  
Dash:  
  
  
  
LongDash:  
  
  
  
DashDot:  
  
  
  
LongDashDot:  
  
  
  
LongDashDotDot: 
 
 
 

在画坐标的时候，需要箭头，VML已经定义好了箭头，在Stroke体现:EndArrow和StartArrow属性，一个是线开始的时候有箭头，另一个是线结束的时候有箭头。箭头的样式也有不少：

 
 
 

  
  
  
<v:linestylev:linestyle="position:relative"from="0,0"to="100,0"> 
  
  
  
<v:strokeEndArrowv:strokeEndArrow="Classic"/> 
  
  
  
 
  
  
  
 
  
  
  
EndArrow="Block":  
  
  
  
EndArrow="Classic":(这个看起来还比较舒服)  
  
  
  
EndArrow="Diamond":  
  
  
  
StartArrow="Oval":  
  
  
  
StartArrow="Open": 
 
 
 

PolyLine是Line的变形，是不规则的连续的线。它有个特殊的属性Points,用来设置每个点的坐标。例如：

 
 
 

  
  
  
<v:PolyLinefilledv:PolyLinefilled="false"Points="0,00,10020,150200,100"style="position:relative"/> 
 
 
 

一样可以设置它的线的样式和类型以及箭头(IE5.0中，PolyLine不支持Arrow)

 
 
 

  
  
  
<v:PolyLinefilledv:PolyLinefilled="false"Points="0,00,10020,150200,100"style="position:relative"/> 
  
  
  
<v:strokeStartArrowv:strokeStartArrow="Oval"EndArrow="Classic"dashstyle="Dot"/> 
  
  
  
 
 
 
 

Javascript+VML画矩形：

用VML画矩形，必须设置style="width:50;height:50"，其他就没有什么特别的。在这节，顺便讲讲shadow对象和TextBox对象：

 
 
 

  
  
  
<v:Rectstylev:Rectstyle="position:relative;width:100;height:50px"/> 
 
 
 

RoundRect顾名思义，是圆角的矩形，这种形状在画流程图的时候很常用，如果加上阴影，就更好看了：

 
 
 

  
  
  
<v:RoundRectstylev:RoundRectstyle="position:relative;width:100;height:50px"> 
  
  
  
<v:shadowonv:shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"/> 
  
  
  
 
 
 
 

在VML里面，True和False可以简写成T和F。Shadow中的offset属性用来设置偏移原图的x,y值。on属性用来决定是否显示阴影。在矩形中写字，要用到TextBox对象。TextBox比较关键的属性是inset(left,top,right,bottom)，意思是隔图形边的上下左右多少范围内定位文字：

 
 
 

  
  
  
<v:RoundRectstylev:RoundRectstyle="position:relative;width:120;height:50px"> 
  
  
  
<v:shadowonv:shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"/> 
  
  
  
<v:TextBoxinsetv:TextBoxinset="5pt,5pt,5pt,5pt"style="font-size:10.2pt;">Helloworld! 
  
  
  
 
  
  
  
Helloworld! 
 
 
 

当然你也可以直接插入HTML代码，比如说插入一个

 
 
 

  
  
  
<DivstyleDivstyle="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">HelloWorld!