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