1 引言
可縮放矢量圖形格式(Scalable Vector Graphics),簡稱為SVG,是基于XML(Extensible Markup Language,擴展性標(biāo)記語言)的開放的矢量圖形格式。作為XML的一種應(yīng)用,SVG繼承了XML的諸多優(yōu)點,同時,又具有文件量小、無級縮放、易于修改、支持重用以及良好的交互性等等一系列優(yōu)點。作為W3C正式推薦的圖形格式,SVG擁有眾多的支持機構(gòu)。
城市軌道交通自動化系統(tǒng)是典型的計算機集成系統(tǒng),既包括電力監(jiān)控、環(huán)境與設(shè)備監(jiān)控、防災(zāi)等單個專業(yè)的應(yīng)用,又包括多個專業(yè)集成的綜合監(jiān)控系統(tǒng),這些系統(tǒng)主要都基于大型通用的SCADA(Supervisory Control And Data Acquisition)軟件構(gòu)建,其中監(jiān)控畫面的生成是工程實施主要內(nèi)容之一,工作量大,能否快速生成各類復(fù)雜的監(jiān)控圖符和監(jiān)控畫面是評價系統(tǒng)好壞的重要參考指標(biāo)。簡單的基本圖形比如直線、矩形、圓、折線、多邊形等是生成監(jiān)控畫面的基本元素,通過旋轉(zhuǎn)、閃爍、變色、組合等各種屬性或操作可生成各種復(fù)雜圖符。為監(jiān)視現(xiàn)場設(shè)備的工作狀態(tài),圖符需要根據(jù)采集到的現(xiàn)場設(shè)備工作狀態(tài)而改變顯示屬性,展現(xiàn)出豐富的畫面信息。例如,在實施環(huán)境與設(shè)備監(jiān)控系統(tǒng)時,需要生成如下表所示的風(fēng)機、空調(diào)柜監(jiān)視圖符,并且圖符的顏色等屬性應(yīng)隨現(xiàn)場設(shè)備的狀態(tài)變化而改變。
一般來說,與專業(yè)的矢量圖形軟件相比,監(jiān)控畫面生成軟件更關(guān)注于圖符特性的定義與現(xiàn)場設(shè)備的連接,而在繪制圖符的方便性、易用性和靈活性上都相對較弱。因此,直接利用專業(yè)矢量圖形軟件來繪制靜態(tài)圖符,監(jiān)控畫面生成軟件導(dǎo)入相應(yīng)靜態(tài)圖形后再定義各種動態(tài)信息和顯示刷新腳本將起到事半功倍的效果。SVG作為標(biāo)準(zhǔn)的開放矢量圖形格式,當(dāng)前Adobe公司的Illustrator、Corel公司的CorelDraw等都支持SVG文件格式,可將SVG文件作為專業(yè)矢量圖形軟件和自動化軟件間的橋梁。
2 典型矢量圖形軟件導(dǎo)出的SVG文件格式分析
Adobe Illustrator 是Adobe公司推出的一款成功的結(jié)合SVG功能的矢量圖形編輯軟件,它具有強大的矢量圖形組態(tài)功能,可以支持大多數(shù)SVG圖形功能,并且支持SVG格式圖形的導(dǎo)出。利用Adobe Illustrator提供的繪圖工具,可繪制出各種基本圖形及各種復(fù)雜圖形,通過另存為SVG文件,用普通的文本文件查看工具可詳細分析Adobe Illustrator CS2 v12.0導(dǎo)出的SVG文件格式,為在城市軌道交通自動化系統(tǒng)中進行應(yīng)用奠定基礎(chǔ)。
2.1 基本圖形
下表列出部分Adobe Illustrator支持的基本圖形及部分SVG代碼實例。
2.2 圖形文檔
在Adobe Illustrator中創(chuàng)建一個不包含任何SVG向量圖形的空文檔,其相應(yīng)的SVG導(dǎo)出代碼如下:
Adobe Illustrator CS2在文檔第一行中聲明編碼格式為UTF-8格式,這樣可以保證中文的正常顯示。其中,<svg>為SVG圖形文檔的根元素,包含了部分跟文檔有關(guān)的屬性,例如width是文檔的寬度,height為文檔的高度。
2.3 圖層
Adobe Illustrator CS2支持圖層的概念,并且圖層是可以嵌套的。圖層相關(guān)的SVG代碼實例為:
如上述代碼可知,圖層在SVG中是用<g>元素表示,所有位于同一個<g>圖層元素下的任何元素都在一個圖層內(nèi),圖層的嵌套即<g>元素的嵌套,<g>圖層元素具有的id屬性表示圖層名,此圖層名在SVG導(dǎo)出時是唯一的。如果SVG圖形中只有一個圖層,則沒有任何表示圖層的<g>元素,<svg>根元素即表示唯一的圖層。
2.4 組合對象
下面的SVG代碼從Adobe Illustrator CS2導(dǎo)出,說明了Adobe Illustrator CS2中組合對象的概念:
如上述代碼可知,組合對象在SVG中也是用<g>元素表示的,在同一個<g>元素下的圖形對象就是一個單獨的組合對象。組合對象也是可嵌套的。每個組合對象<g>元素也有唯一的id值,表示此組合對象的名稱。
3 SVG圖形文件的導(dǎo)入設(shè)計
北京和利時系統(tǒng)工程股份有限公司獨立自主開發(fā)的MACS-SCADA系統(tǒng),作為一個符合城市軌道交通自動化系統(tǒng)應(yīng)用要求的SCADA軟件平臺,實現(xiàn)了完整的監(jiān)控畫面生成軟件功能。對于靜態(tài)圖形繪制,主要功能包括:
1) 支持的基本圖形元素包括直線、矩形、圓角矩形、橢圓、圓、折線、多邊形、三次貝塞爾曲線、弧線、拱形、餅形等。
2) 支持圖層概念,但不支持圖層的嵌套。
3) 支持對象的組合,并且支持組合對象的嵌套。
4) 圖形對象擁有線寬、線色、填充色、旋轉(zhuǎn)角度、對象名等的屬性。
依據(jù)對Adobe Illustrator導(dǎo)出的SVG文件的分析,對比MACS-SCADA系統(tǒng)具有的功能,可發(fā)現(xiàn)除個別SVG元素外,系統(tǒng)支持SVG圖形的導(dǎo)入。
為直接利用專業(yè)矢量圖形軟件來繪制靜態(tài)圖符,系統(tǒng)支持SVG圖形的導(dǎo)入。
對于圖形的各種屬性,系統(tǒng)也能夠支持相關(guān)的導(dǎo)入。
導(dǎo)入SVG文檔是通過微軟提供的MSXML SDK對SVG文檔進行解析,在內(nèi)存中形成DOM樹,并通過SDK提供的接口對DOM樹進行讀寫來實現(xiàn)。SVG文檔中圖形元素有很多共同的屬性,系統(tǒng)通過基類CImportSVGBase來完成公共屬性的導(dǎo)入,通過相應(yīng)的派生類導(dǎo)入SVG文檔中的具體圖形。這些類的關(guān)系結(jié)構(gòu)如下:
由于MACS-SCADA系統(tǒng)不支持圖層的嵌套,但是SVG文檔是可以多級圖層嵌套的,故導(dǎo)入時需要進行將圖層內(nèi)部的嵌套圖層轉(zhuǎn)換為系統(tǒng)中的組合對象。
SVG中任一圖形對象都具有transform屬性,transform屬性中最復(fù)雜的變換方式就是矩陣變換,對應(yīng)的二維坐標(biāo)變換公式:
MACS-SCADA 中圖形對象也支持矩陣變換,以旋轉(zhuǎn)中心和旋轉(zhuǎn)角度來表示。為實現(xiàn)對SVG矩陣變換的支持,需要從矩陣變換的參數(shù)(a、b、c、d、e、f)中計算出旋轉(zhuǎn)角度和旋轉(zhuǎn)中心。假設(shè)旋轉(zhuǎn)角度為 ,旋轉(zhuǎn)中心點為坐標(biāo)原點((0,0),平移距離為(tx,ty),則對應(yīng)的SVG的矩陣變換公式為:
從而可得到以下對應(yīng)關(guān)系a = d = cos( ),b = -c = sin( ),e = tx,f = ty,旋轉(zhuǎn)的中心點為坐標(biāo)原點(0,0)。
4 總結(jié)
總的來說,可縮放矢量圖形SVG在城市軌道交通自動化系統(tǒng)中有廣闊的應(yīng)用前景,本文探討了如何利用SVG作為橋梁,使得系統(tǒng)可以利用通用繪圖軟件強大的繪圖功能來提高易用性和工作效率。另外,系統(tǒng)還可以利用SVG對腳本的支持和提供的動畫特性實現(xiàn)動態(tài)畫面,實現(xiàn)在瀏覽器中查看監(jiān)控畫面;或者將監(jiān)控畫面導(dǎo)出為SVG文件,提高系統(tǒng)的開放性,方便系統(tǒng)與其它系統(tǒng)集成和互聯(lián)。SVG的開放性和基于XML的特點,決定了SVG在靜態(tài)畫面生成、動態(tài)特性連接、圖形文件格式開放性、WEB應(yīng)用等方面都可以促進自動化系統(tǒng)的發(fā)展。
參考資料
[1] W3C,《Scalable Vector Graphics (SVG) Full 1.2 Specification》,W3C Working Draft,April 2005,http://www.w3.org/TR/SVG12
[2] Oswald Campesato,《Fundamentals of SVG Programming-Concepts to Source Code》,Charles River Media Incorporated,2004
[3] 徐海軍,李建華,《SVG在工作流圖形監(jiān)控中的應(yīng)用》,信息技術(shù),2006年02期
[4] Rodrigo García García,《SVG for SCADA Applications:A practical approach》,http://www.svgopen.org/2004/papers/SVGforSCADA/
[5] 賀睿,苗雪芃,陳劍云,《基于SVG的SCADA監(jiān)控畫面生成軟件的設(shè)計與開發(fā)》,工業(yè)控制計算機,2006年06期
[6] Adobe Systems Incorporated,《Adobe Illustrator CS2使用指南》,2005