扫一扫下方二维码,关注本站官方公众号
获取永久解锁本站全部文章的验证码
还能不定期领现金红包

浅谈如何用Javascript+VML实现流程设计器-Go语言中文社区

浅谈如何用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,就是起始点和终止点坐标。

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

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

Single(默认),ThinThin,ThinThick,ThickBetweenThin

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

  1. <v:linestylev:linestyle="position:relative"from="0,0"to="100,0"> 
  2. <v:strokedashstylev:strokedashstyle="Dot"/> 
  3. </v:line> 
  4.  
  5. Solid(默认):见上图  
  6. ShortDash:  
  7. ShortDot:  
  8. ShortDashDot:  
  9. ShortDashDotDot:  
  10. Dot:  
  11. Dash:  
  12. LongDash:  
  13. DashDot:  
  14. LongDashDot:  
  15. LongDashDotDot: 

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

  1. <v:linestylev:linestyle="position:relative"from="0,0"to="100,0"> 
  2. <v:strokeEndArrowv:strokeEndArrow="Classic"/> 
  3. </v:line> 
  4.  
  5. EndArrow="Block":  
  6. EndArrow="Classic":(这个看起来还比较舒服)  
  7. EndArrow="Diamond":  
  8. StartArrow="Oval":  
  9. StartArrow="Open"

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

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

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

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

Javascript+VML画矩形:

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

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

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

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

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

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

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

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

效果是一样的。

有了线,及矩形。然后就是Javascript啦!

版权声明1:本文来源51CTO,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:http://developer.51cto.com/art/200906/131921.htm
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-05-16 09:10
  • 阅读 ( 237 )

0 条评论

请先 登录 后评论

官方社群