javascript + 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 ,就是起始点和终止点坐标。
   

 

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

   
   
   

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

   
   
   

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

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

   

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

   
   
   

 

vml 画矩形：

 

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

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

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

Hello World!

效果是一样的。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/12639172/viewspace-612095/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/12639172/viewspace-612095/