html5實現流程圖

之前在IE盛行，微軟一家獨大的時候，web繪圖功能首選就是VML，IE5.0以上的版本都支持VML，VML能夠在IE中經過文本的方式繪製矢量圖像，相似在html頁面中實現了畫筆的功能，因此被不少人採用來實現web流程設計器。

隨着手機，ipad等各類移動設備的升級，愈來愈多的應用要求支持這些移動設備。很惋惜VML只支持IE，手機和ipad大部分是chrome和safari，不支持VML，web繪製流程圖的功能，要實現跨瀏覽器，必須採用別的技術。

svg是Scapable Vector Graphics,可縮放的矢量圖像，是互聯網聯盟W3C推薦的標準，符合XML節點的規則，用XML來描述二維圖像的語言。和VML相似，都是用文原本描述二維圖像的語言，而且SVG是W3C的標準，幾乎全部瀏覽器都支持，可是IE5-IE8又有特殊了，須要下載adobe的SVGView插件才能查看。

爲了兼容已經用VML作好的繪圖功能，而且兼容用IE的客戶，因此咱們在實現web流程設計器的繪圖功能時，須要根據瀏覽器來切換，當IE瀏覽器時，咱們用VML來繪圖，當其餘瀏覽器時，用SVG來繪圖，作到自動切換，讓用戶感受不到不一樣，這是最好的。

VML和SVG的區別：
VML的優勢：
XML標準，文本標記，表示方法簡單。
高質量的矢量圖像，支持多種不一樣的矢量圖形元素：
 Shape 
 Line 
 Polyline
 Path
 Curve 
 Rect
 Roundrect
 Group
 Oval
 Arc
能夠方便的嵌入html文件。
兼容DHTML的大部分屬性和事件。如，id,title,onmouseover等等，還能夠自定義屬性。

支持動畫和交互

SVG支持任意的幾何圖形，漸變色，濾鏡，動畫等。而且，VML有的那些有點，SVG也有，如
基於XML標準
高質量的矢量圖像
文本描述的二維圖像
另外，SVG比VML還有一些優勢
靈活的文件格式
支持交互和動畫
支持字符查找
支持Xlink和Xpointer

利用VML和SVG的相同和不一樣，咱們在繪製流程圖的時候，根據瀏覽器的不一樣，切換到不一樣的技術。如IE中，咱們用VML來劃線：

同一個流程，Safari中繪製的流程圖：

 

線條的粗細稍有不一樣，位置形狀徹底一致，自動切換，終端用戶使用中感受不到差別。

標籤: web開發平臺, java工做流, 流程設計器, 自定義工做流, web工做流, 自定義表單, 工做流引擎, .net工做流