如何用Javascript+VML實現流程設計器

這篇文章主要介紹“如何用Javascript+VML實現流程設計器”，在日常操作中，相信很多人在如何用Javascript+VML實現流程設計器問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用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,就是起始點和終止點坐標。

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

◆如果要改變線的樣式，LineStyle(Stroke)屬性可以做到:

Single(默認)，ThinThin，ThinThick，ThickBetweenThin

◆如果要改變線的類型，可以用DashStyle(Stroke)屬性:

<v:linestylev:linestyle="position:relative"from="0,0"to="100,0"> <v:strokedashstylev:strokedashstyle="Dot"/> </v:line>  Solid(默認):見上圖  ShortDash:  ShortDot:  ShortDashDot:  ShortDashDotDot:  Dot:  Dash:  LongDash:  DashDot:  LongDashDot:  LongDashDotDot:

在畫坐標的時候，需要箭頭，VML已經定義好了箭頭，在Stroke體現:EndArrow和StartArrow屬性，一個是線開始的時候有箭頭，另一個是線結束的時候有箭頭。箭頭的樣式也有不少：

<v:linestylev:linestyle="position:relative"from="0,0"to="100,0"> <v:strokeEndArrowv:strokeEndArrow="Classic"/> </v:line>  EndArrow="Block":  EndArrow="Classic":(這個看起來還比較舒服)  EndArrow="Diamond":  StartArrow="Oval":  StartArrow="Open":

PolyLine是Line的變形，是不規則的連續的線。它有個特殊的屬性Points,用來設置每個點的坐標。例如：

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

一樣可以設置它的線的樣式和類型以及箭頭(IE5.0中，PolyLine不支持Arrow)

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

Javascript+VML畫矩形：

用VML畫矩形，必須設置，其他就沒有什么特別的。在這節，順便講講shadow對象和TextBox對象：

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

RoundRect顧名思義，是圓角的矩形，這種形狀在畫流程圖的時候很常用，如果加上陰影，就更好看了：

<v:RoundRectstylev:RoundRectstyle="position:relative;width:100;height:50px"> <v:shadowonv:shadowon="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:RoundRectstylev:RoundRectstyle="position:relative;width:120;height:50px"> <v:shadowonv:shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"/> <v:TextBoxinsetv:TextBoxinset="5pt,5pt,5pt,5pt"style="font-size:10.2pt;">Helloworld!</v:TextBox> </v:RoundRect> Helloworld!

當然你也可以直接插入HTML代碼，比如說插入一個

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

效果是一樣的。

有了線，及矩形。然后就是Javascript啦！

到此，關于“如何用Javascript+VML實現流程設計器”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！