js+vml流程设计器

javascript + vml 实现流程设计器。

在web中实现流程设计器，仅html无法实现画线等。

VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。
VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。显然只有IE支持。

此例使用vml实现。

vml 画线段：

Line是做图中最常用的，它有两个特殊的属性 from 和 to ,就是起始点和终止点坐标。
<v:line from="0,0" to="100,50" style="position:relative;"/>

●如果要改变线的样式，LineStyle (Stroke)属性可以做到:
Single(默认)，ThinThin，ThinThick，ThickBetweenThin
●如果要改变线的类型，可以用 DashStyle(Stroke)属性:

<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot"/>
</v:line>

Solid(默认):见上图
ShortDash:
ShortDot:
ShortDashDot:
ShortDashDotDot:
Dot:
Dash:
LongDash:
DashDot:
LongDashDot:
LongDashDotDot:
●在画坐标的时候，需要箭头，VML已经定义好了箭头，在Stroke体现:EndArrow 和 StartArrow 属性，一个是线开始的时候有箭头，另一个是线结束的时候有箭头。箭头的样式也有不少：

<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke EndArrow="Classic"/>
</v:line>

EndArrow="Block":
EndArrow="Classic":(这个看起来还比较舒服)
EndArrow="Diamond":
StartArrow="Oval":
StartArrow="Open":

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

<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>

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

<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
</v:PolyLine>

vml 画矩形：

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

RoundRect顾名思义，是圆角的矩形，这种形状在画流程图的时候很常用，如果加上阴影，就更好看了：
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>

在VML里面，True 和 False 可以简写成 T 和 F。Shadow 中的 offset 属性用来设置 偏移原图的 x,y 值。 on 属性用来决定是否显示阴影。在矩形中写字，要用到 TextBox 对象。TextBox 比较关键的属性是 inset(left,top,right,bottom)，意思是隔图形边的上下左右多少范围内定位文字：
<v:RoundRect style="position:relative;width:120;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
</v:RoundRect>
Hello world!
当然你也可以直接插入HTML代码，比如说插入一个
<Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello World!</Div>
效果是一样的。

有了线，及矩形。然后就是javacript啦！

就是动态创建【线】还有【矩形】。而后处理mousedown mousemove 等事件实现。

演示地址：http://www.hocor.cn/workflowdesign/

Demo: http://files.cnblogs.com/houfeng/VmlTest.rar