web图形化流程图基于.net2003+vml+javascript

it2026-05-16  16

web图形化流程图基于.net2003+vml+javascript 1、什么是vml? VML的全称是Vector Markup Language(矢量可标记语言) VML可以理解为是IE里面的画笔工具,可以通过它来实现你所想要画出的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月随 IE5.0 一起发布的,也就是说,在 IE5.0+ 里都支持。 在VML里面,使用的是XML扩展标记,需要一个namespace(命名空间),在上面的程序里就是那个“v” <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <style> v\:* {behavior: url(#default#VML);} </style> </head> 这部分代码其实就是把命名空间“v”和系统预定义的行为VML连接。这样定义以后,我们就可以使用下面的标记了,和普通的HTML标记有所区别,每个标记都增加了一个命名空间: 如:<v:shape></v:shape> “v” 是我们定义的VML,“:” 后面就是VML的对象(shape 是VML最基本的对象,利用它可以画出所有你想要的图形),每个VML对象都有许多属性,这些大家可以查 VML教程 细看,我这里不多说了。 我们看前面的代码: <body> <v:RoundRect style="width:200;height:100px"> <v:shadow on="true" type="single" color="#b3b3b3" offset="5px,5px"/> <v:textbox style="font-size:12px"> <div>圆角表格显示效果<br /><br /><a href="http://blog.eliuzd.com/">http://blog.eliuzd.com/</a></div> </v:textbox> </v:RoundRect> </body> body 中的内容就是在使用VML对象画图了。 RoundRect:从名字就可以看出,是画个圆角矩形 style="width:200;height:100px" 设置矩形的长宽 shadow:阴影 textbox:内容 style="font-size:12px" 就是设置字体大小,它还有个属性是 print (true/false) 是否被打印机打印。 VML 对象除了自己的属性外,基本支持CSS2样式表的所有样式属性。 2、初试vml 先看效果图: 代码: <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <style> v\:* {behavior: url(#default#VML);} </style> </head> <body> <v:RoundRect style="width:200;height:100px"> <v:shadow on="true" type="single" color="#b3b3b3" offset="5px,5px"/> <v:textbox style="font-size:12px"> <div>圆角表格显示效果<br /><br /><a href="http://blog.eliuzd.com/">http://blog.eliuzd.com/</a></div> </v:textbox> </v:RoundRect> </body> </html> 实现代码很简单,主要就是用到了微软的VML技术(代码里的 xmlns:v 相关部分): 3、我实现的流程图 效果: 恩以上是我的流程图,通过.net后台从数据库中提取流程节点及关系绘制出的流程图形,同时配合js脚本有拖动事件!

转载于:https://www.cnblogs.com/jiangwei2099/archive/2007/03/28/690810.html

相关资源:asp.net知识库
最新回复(0)