矢量繪圖解決方案

用SVG和VML開發工做流設計器

工做流是許多系統中必備的一種功能，而工做流設計器就顯示對用戶很重要。可視化的設計器對於客戶來講就更好了，很是直觀，有效果的減小用戶的煩腦。 在各類應用中有b/s的系統，有c/s的系統。不一樣的系統工做流程都是類似的。當今web應用日益普遍，所以本文將講述如何在web上實現工做流設計器。其中,圖形技術發揮着相當重要的做用,可升級矢量圖像( SVG, Scalable Vector Graphics)和VML(Vector Markup Language)的產生有着十分積極的意義。它具備支持矢量圖和動畫、由文本構成圖形易於操做、對點陣圖形兼容等特色。然而，不一樣瀏覽器對兩種標準的支持並不一致， 微軟的IE瀏覽器系列對VML支持比較好，而其餘的瀏覽器軟件對SVG標準支持更完美。這也使得開發基於Web的圖形系統變得更加複雜。

多比圖形控件出現簡化了的這種開發難度，它是一款基於Web的矢量圖形控件，可以檢測瀏覽器類型，自動選擇VML或SVG方案進行作圖， 相似於網頁上的Visio控件。

VML技術

VML(VectorMarkup Language)是XML1. 0 的一個應用,使用VML 能夠在IE 5. 0 以上版本中繪製矢量圖形。因爲VML 是基於新一帶網絡標記語言XML 標準的,也就是說,表示方法簡單,易於擴展,數據與表現相分離,同時VML 支持高質量的矢量圖形顯示,它基於相鏈接的直線和曲線描述路徑。其次VML 由文本構成,能夠很方便地融合到HTML文件中,可用不多的字節來表示較複雜的圖像,能夠和其它HTML元素同樣使用VML元素,在客戶端瀏覽器顯示圖像。VML能夠使用DHTML大部分屬性和事件,如id, onmouseover等。最後VML 的功能不僅是繪圖,它能夠在圖形中嵌入文本,並可實現超鏈,經過腳本控制還能夠實現動畫效果。

SVG技術

 SVG是由W3C制定的基於XML來描述二維矢量圖型的一個開放標準,它用文本格式的描述性語言來描述圖像內容,所以是一種和圖像分辨率無關的矢量圖形格式。它具備如下優勢:

1.圖像文件可讀,易於修改和編輯。

2.與現有技術能夠互動融合。另外,  SVG文件還可嵌入JavaScript腳原本控制SVG對象。

3.SVG圖形格式能夠用來動態生成圖形。例如,可用 SVG動態生成具備交互功能的地圖,嵌入網頁中,並顯示給終端用戶。

4. 如前所述, SVG文檔做爲一種規範的XML文檔,可以很好地與W3C其餘開放標準如DOM, CSS,XSL, XL ink, Xpointer, SM IL, HTML, XHTML等進行協同工做,簡化異質系統間的信息交流,方便數據庫的存取。

 

多比控件簡介

多比圖形控件出現簡化了的這種開發難度，它是一款基於Web的矢量圖形控件，可以檢測瀏覽器類型，自動選擇VML或SVG方案進行作圖， 相似於網頁上的Visio控件，是目前國內外最佳的基於web矢量圖解決方案，能夠用於電力、化工、煤炭、工控組態軟件、仿真、地理信息系統、工做流、複雜報表 工業SCADA系統、ERP流程設計系統、圖形管理、圖形拓撲分析、GIS地理信息系統系統、工程製圖等領域。

多比圖形編輯器實現了圖形、圖像和文字的有機統一。它除了支持HTML 中經常使用的標記,如文本、圖像、連接、交互性、CSS的使用、腳本( Scrip t)外,還提供了大量針對圖形、圖像、動畫的特定標記。對SVG圖形文件進行編輯管理的過程爲: SVG圖形文件經XML 解析器打開,並在內存中生成一個對象樹,用鼠標事件來驅動腳本執行,腳本經過DOM接口對對象進行相關的操做,來實現圖形繪製、編輯等功能。

Web工做流設計器的實現

在web上做設計器，圖形有了，剩下的就是控制這些圖形元素。

工做流程有兩種基本元素一種咱們稱之爲節點，一點稱之爲關係（節點間的關係）也就是工做流的流向問題。要實現工做流設計器有幾個要點：

一、支持工做流元素的添加、刪除、移動。

二、創建節點間的關係

三、將設計好的流程保存到永久物質裏（如文件，數據庫等）

四、能夠從永久數據裏讀取數據，並表現爲圖形