当前位置 > 首页 > Asp.net

js+vml流程设计器

6/26/2009 1:23:00 AM来源:Asp.net

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 ,就是起始点和终止点坐标。
    <v:line from="0,0" to="100,50" style="position:relative;"/>

 


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

    <v:line style="position:relative" from="0,0" to="100,0" >
    <v:stroke dashstyle="Dot"/>
    </v:line>

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

    <v:line style="position:relative" from="0,0" to="100,0" >
    <v:stroke EndArrow="Classic"/>
    </v:line>

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


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

    <v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>


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

    <v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
    <v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
    </v:PolyLine>

 

vml 画矩形:

 

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

    RoundRect顾名思义,是圆角的矩形,这种形状在画流程图的时候很常用,如果加上阴影,就更好看了:
    <v:RoundRect style="position:relative;width:100;height:50px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
    </v:RoundRect>

    在VML里面,True 和 False 可以简写成 T 和 F。Shadow 中的 offset 属性用来设置 偏移原图的 x,y 值。 on 属性用来决定是否显示阴影。在矩形中写字,要用到 TextBox 对象。TextBox 比较关键的属性是 inset(left,top,right,bottom),意思是隔图形边的上下左右多少范围内定位文字:
    <v:RoundRect style="position:relative;width:120;height:50px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
    <v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
    </v:RoundRect>
Hello world!
    当然你也可以直接插入HTML代码,比如说插入一个
<Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello World!</Div>
效果是一样的。

 

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

就是动态创建【线】还有【矩形】。而后处理mousedown mousemove 等事件实现。

 

演示地址:http://www.hocor.cn/workflowdesign/ 



------------------------------------------------------------------------------------------
本文链接: http://www.cnblogs.com/houfeng/archive/2009/06/25/1511278.html
作者博客: http://www.cnblogs.com/houfeng/ [订阅]
网站导航: 博客园首页  新闻  .NET频道  社区  博问  闪存  找找看
新闻频道: 卡马克解释id为何要委身于ZeniMax

  • 查询IP所在区段

    5/18/2007 11:58:00 PM

    摘要: 编程语言:C#类 别:(网络应用,实用算法)主要功能:查询一个IP所有的IP段. 关键:从Byte数组到ulong的转换出来的数字和 IPAddress.Address 返回值的是不一样的

  • Children's Discovery Institute

    3/16/2007 2:22:00 PM

    If you're looking for a great cause, check out the recent developments over at the Children

  • 【间歇的日记】学习OD的第一天——用VB.NET写一个XP扫雷外挂

    12/23/2009 4:46:00 PM

    阅读: 17 评论: 0 作者: 流浪d&#232;风 发表于 2009-12-23 16:27 原文链接 只有注册用户登录后才能阅读该文。 阅读全文 。    发表评论 新

  • 为什么Clone()和Dispose()在c++.net中使用出错??请大神指点!

    8/8/2012 11:32:00 AM

    //把截图对象赋给原图 cutimage = (System::Drawing::Image)pickedImage->Clone(); //释放截图资源 pickedG->

  • Dotnetrocks!!!

    1/18/2010 3:05:00 PM

    Dotnetrocks is a cool internet audio talk show for .Net developers. In DJ Style with cool musical e

  • UCenter的安全漏洞

    12/13/2009 3:27:00 AM

    阅读: 34 评论: 0 作者: 彭帅 发表于 2009-12-13 01:56 原文链接 今天随便看了下Ucenter和uchome的统一账户机制。感觉设计上面不是很合理. 如果想让某应

  • 增强.net开发的5个非常有用的Visual Studio 2012扩展

    12/4/2012 10:45:00 AM

    Microsoft visual studio 可以定义为一个 IDE,即集成的开发环境的缩写。 无论是编写一个控制台,一个图形用户界面还是 windows 应用程序、 web 站点、 web 应

  • Silverlight Streaming:我的帐号328

    5/9/2007 10:59:00 PM

    328 是公开的帐号 ID ,也可以在代码中查看到。与之对应的 key 则是保密的。周末的时候使用 Microsoft Expression Media Encoder 和 Silv

  • 如何编写单元测试用例(白盒测试)。

    8/23/2007 11:29:00 AM

    前段时间公司进行有关测试的培训,集成测试,性能测试,压力测试说了很多。由于本人还处于Coder阶段,只是对单元测试有了些了解。写下来怕以后自己忘记了。都是些自己的看法,不一定准确,欢迎高手指教。

  • A peek at the new Visual WebGui web design tool & its themes

    5/7/2009 9:08:00 PM

    The new Point & Click web design tool - the Control & Theme Designer - presents a ground