用VML实现画流程图！

最新推荐文章于 2014-03-10 11:40:40 发布
转载 最新推荐文章于 2014-03-10 11:40:40 发布 · 176 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/anson/archive/2006/05/09/395280.html

今天看了一下VML的一些简单的教程，于是就拿VML来画画流程图。
感觉还像个样吧，呵呵 :)

就用了两个最基本的元素，
一是线，
<v:line style="position:relative;border:2" strokeweight="3px" from="0,0" to="100,0" >
</v:line>
二是框。
<v:rect id=vml10 style="Z-INDEX:1;LEFT:377;WIDTH:500;POSITION:absolute;TOP:188;HEIGHT:60" fillcolor="white" strokecolor="black" strokeweight="3px">
</v:rect>
有很多人问我要源代码，我现在就把它帖出来吧。
其实很简单的，可能没有接触过VML的人对此感觉到神秘。

None.gif<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
None.gif<head>
None.gif    <title>无标题页</title>
ExpandedBlockStart.gifContractedBlock.gif    <style>dot.gif
ExpandedSubBlockStart.gifContractedSubBlock.gifv\:*{dot.gif}{behavior:url(#default#VML);}
ExpandedSubBlockStart.gifContractedSubBlock.gifo\:*{dot.gif}{behavior:url(#default#VML);}
None.gif</style>
ExpandedBlockStart.gifContractedBlock.gif    <style>dot.gif
InBlock.gif.startLine
ExpandedSubBlockStart.gifContractedSubBlock.gif{dot.gif}{
InBlock.gifposition:relative;border:2;
InBlock.gifZ-INDEX:3011;LEFT:170px;POSITION:absolute;TOP:80px;
ExpandedSubBlockEnd.gif}
ExpandedBlockEnd.gif
None.gif</style>
None.gif</head>
None.gif<body>
None.gif    
None.gif    <v:rect id="vml1" style="z-index: 1; left: 50; width: 120; position: absolute;
None.gif        top: 50; height: 60" fillcolor="white" strokecolor="black" strokeweight="3px">
None.gif        <table border="0" width="110" align="center" style="font-size:9pt;">
None.gif            
None.gif            <tr><td ><img src=t_web.gif border="0">流程开始</td></tr>
None.gif            <tr><td >申请人</td></tr>
None.gif                
None.gif        </table>    
None.gif        </v:rect>    
None.gif   <v:line class="startLine" strokeweight="3px" from="0,0" to="100,0">
None.gif        <v:stroke endarrow="Classic" startarrow="Oval" />
None.gif    </v:line>            
None.gif               
None.gif     <v:rect id="vml2" style="z-index: 1; left: 270; width: 120; position: absolute;
None.gif        top: 50; height: 60" fillcolor="white" strokecolor="black" strokeweight="3px">
None.gif        <table border="0" width="110" align="center" style="font-size:9pt;" >
None.gif            
None.gif            <tr><td  ><img src=t_web.gif border="0">部门领导审批</td></tr>
None.gif            <tr><td >部门经理</td></tr>
None.gif                
None.gif        </table>    
None.gif        </v:rect>               
None.gif            
None.gif      <v:line style="position:relative;border:2;Z-INDEX:3011;LEFT:390px;POSITION:absolute;TOP:80px;" strokeweight="3px" from="0,0" to="100,0">
None.gif        <v:stroke endarrow="Classic"  />
None.gif    </v:line>         
None.gif       
None.gif    
None.gif    
None.gif    <v:rect id="vml3" style="z-index: 1; left: 490; width: 120; position: absolute;
None.gif        top: 50; height: 60" fillcolor="white" strokecolor="black" strokeweight="3px">
None.gif        <table border="0" width="110" align="center" style="font-size:9pt;" >
None.gif            
None.gif            <tr><td  ><img src=t_web.gif border="0">总经理审批</td></tr>
None.gif            <tr><td ><a href="#" >总经理</a></td></tr>
None.gif                
None.gif        </table>    
None.gif        </v:rect>               
None.gif            
None.gif      <v:line style="position:relative;border:2;Z-INDEX:3011;LEFT:610px;POSITION:absolute;TOP:80px;" strokeweight="3px" from="0,0" to="100,0">
None.gif        <v:stroke endarrow="Classic"  />
None.gif    </v:line>   
None.gif    
None.gif    <v:rect id="vml4" style="z-index: 1; left: 710; width: 120; position: absolute;
None.gif        top: 50; height: 60" fillcolor="white" strokecolor="black" strokeweight="3px">
None.gif        <table border="0" width="110" align="center" style="font-size:9pt;" >
None.gif            
None.gif            <tr><td  ><img src=t_web.gif border="0">归档</td></tr>
None.gif            <tr><td >归档员</td></tr>
None.gif        </table>    
None.gif    </v:rect> 
None.gif    
None.gif    
None.gif</body>
None.gif</html>
None.gif

转载于:https://www.cnblogs.com/anson/archive/2006/05/09/395280.html

VML+HTML实现流程图查看
11-23
实现了vml+html中显示的，并解决了ie浏览器兼容的问题，代码直接运行便好用
js vml画流程图
03-15
js vml画流程图 纯javascript
VML画流程图
退思园
04-07 4960
就用了两个最基本的元素，一是线，二是框。有很多人问我要源代码，我现在就把它帖出来吧。其实很简单的，可能没有接触过VML的人对此感觉到神秘。html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">head>    title>无标题页title><img id="
用VML画图(一些基本的矢量图)
weixin_33953249的博客
09-22 187
注：其中所有的left:top:都是针对图左上角的，比如圆，他的左上角应该是以圆为中心的矩形的左上角 1.line(直线) a.示例： &lt;html xmlns:v="urn:schemas-microsoft-com:vml"&gt; &lt;head&gt; &lt;title&gt;创建一条从(0,0)到(200,200)的红色的边框为2px的直线&lt;/title&...
VML勾画流程图(一)入门概念
快马扬鞭须努力！
03-27 209
VML勾画流程图(一)入门概念 official document location: http://www.w3.org/TR/NOTE-VML 中文教程 http://www.itlearner.com/code/vml/index.html VML的基本概念 VML的全称是Vector Markup Language(矢量可标记语言) 第一个示例hello wo...
JavaScript与VML结合开发流程图教程
根据提供的文件信息，我们可以详细分析关于使用VML (Vector Markup Language) 和 JavaScript开发流程图的相关知识点。VML 是一种基于XML的标记语言，它主要用于在网页上绘制矢量图形。随着HTML5和SVG (Scalable ...
vml实例，实现画流程
12-18
在本实例中，我们将深入探讨如何使用VML来实现画流程图。 流程图是一种可视化表示流程或工作流的工具，它通过各种形状和连接线来展示步骤、决策和流程的流向。VML为绘制这些元素提供了丰富的功能，包括线条、矩形、...
raphael画流程图
08-22
在"raphael画流程图"中，你可以利用Raphaël提供的API来创建和操作这些图形元素。首先，你需要在HTML中引入Raphaël库的脚本文件，然后创建一个绘图区域，通常是一个`<div>`元素。接着，你可以使用`Raphael paper`...
探索基于VML的Rose流程图绘制技术
而**vml-rose流程图** 则是指使用VML技术实现的Rose流程图。这样的流程图通常是面向对象的，能够很好地反映系统的动态行为和静态结构。 在具体的实现中，开发者会利用JavaScript编写逻辑代码，将流程图中的各种元素...
VML流程图
weixin_30244889的博客
07-04 203
<html xmlns:vml="urn:schemas-microsoft-com:vml"> <head runat="server"> <title>无标题页</title> <link rel="stylesheet" type="text/css" href="Css/vmlstyle.css" /> ...
VML 实现流程图
01-20
使用vml封装的流程图控件，颜色大写可自动控制。
vml-rose流程图
12-22
vml-rose流程图，基于vml的web绘图代码
VML图像画版
05-21
VML图像画版,用VML画图，生成VML代码
流程图编辑器--js oop vml
06-11
流程图编辑器--js oop vml
基于VML和SVG的工作流程动态展示实现
11-27
基于VML和SVG的工作流程动态展示实现，自己开发工作流时可以用到，展示方便，用起来简单。
js+vml流程设计器
weixin_30950237的博客
06-25 155
javascript + vml 实现流程设计器。 在web中实现流程设计器，仅html无法实现画线等。 VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形...
VML勾画流程图(二)VML编程
快马扬鞭须努力！
03-27 167
VML勾画流程图(二)VML编程 official document location: http://www.w3.org/TR/NOTE-VML 中文教程 http://www.itlearner.com/code/vml/index.html 脚本动态生成VML 主页面用vml.html，里面只定义了group元素，并定义了勾画rect的javascript方法 数...
vml svg 流程图
wylsjz的专栏
03-10 2408
参考网上的文章用svg绘制工作流程图，结合现在的项目修改了工作流的流程图，代码如下 flow_main.htm         vml\:*{FONT-SIZE: 12px; behavior:url(#default#VML);}                 var strVML = "  "             + "91填写请假加班单' flowf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值