今日頭條
官方微信
官方抖音
案例頻道
1 引言
可縮放矢量圖形格式（Scalable Vector Graphics），簡稱為SVG，是基于XML（Extensible Markup Language，擴展性標記語言）的開放的矢量圖形格式。作為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)容之一，工作量大，能否快速生成各類復雜的監(jiān)控圖符和監(jiān)控畫面是評價系統(tǒng)好壞的重要參考指標。簡單的基本圖形比如直線、矩形、圓、折線、多邊形等是生成監(jiān)控畫面的基本元素，通過旋轉(zhuǎn)、閃爍、變色、組合等各種屬性或操作可生成各種復雜圖符。為監(jiān)視現(xiàn)場設(shè)備的工作狀態(tài)，圖符需要根據(jù)采集到的現(xiàn)場設(shè)備工作狀態(tài)而改變顯示屬性，展現(xiàn)出豐富的畫面信息。例如，在實施環(huán)境與設(shè)備監(jiān)控系統(tǒ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)控畫面生成軟件導入相應(yīng)靜態(tài)圖形后再定義各種動態(tài)信息和顯示刷新腳本將起到事半功倍的效果。SVG作為標準的開放矢量圖形格式，當前Adobe公司的Illustrator、Corel公司的CorelDraw等都支持SVG文件格式，可將SVG文件作為專業(yè)矢量圖形軟件和自動化軟件間的橋梁。
2 典型矢量圖形軟件導出的SVG文件格式分析
Adobe Illustrator 是Adobe公司推出的一款成功的結(jié)合SVG功能的矢量圖形編輯軟件,它具有強大的矢量圖形組態(tài)功能，可以支持大多數(shù)SVG圖形功能，并且支持SVG格式圖形的導出。利用Adobe Illustrator提供的繪圖工具，可繪制出各種基本圖形及各種復雜圖形，通過另存為SVG文件，用普通的文本文件查看工具可詳細分析Adobe Illustrator CS2 v12.0導出的SVG文件格式，為在城市軌道交通自動化系統(tǒng)中進行應(yīng)用奠定基礎(chǔ)。
2.1 基本圖形
下表列出部分Adobe Illustrator支持的基本圖形及部分SVG代碼實例。
2.2 圖形文檔
在Adobe Illustrator中創(chuàng)建一個不包含任何SVG向量圖形的空文檔，其相應(yīng)的SVG導出代碼如下：
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導出時是唯一的。如果SVG圖形中只有一個圖層，則沒有任何表示圖層的<g>元素，<svg>根元素即表示唯一的圖層。
2.4 組合對象
下面的SVG代碼從Adobe Illustrator CS2導出，說明了Adobe Illustrator CS2中組合對象的概念：
如上述代碼可知，組合對象在SVG中也是用<g>元素表示的，在同一個<g>元素下的圖形對象就是一個單獨的組合對象。組合對象也是可嵌套的。每個組合對象<g>元素也有唯一的id值，表示此組合對象的名稱。
3 SVG圖形文件的導入設(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導出的SVG文件的分析，對比MACS-SCADA系統(tǒng)具有的功能，可發(fā)現(xiàn)除個別SVG元素外，系統(tǒng)支持SVG圖形的導入。
為直接利用專業(yè)矢量圖形軟件來繪制靜態(tài)圖符，系統(tǒng)支持SVG圖形的導入。
對于圖形的各種屬性，系統(tǒng)也能夠支持相關(guān)的導入。
導入SVG文檔是通過微軟提供的MSXML SDK對SVG文檔進行解析，在內(nèi)存中形成DOM樹，并通過SDK提供的接口對DOM樹進行讀寫來實現(xiàn)。SVG文檔中圖形元素有很多共同的屬性，系統(tǒng)通過基類CImportSVGBase來完成公共屬性的導入，通過相應(yīng)的派生類導入SVG文檔中的具體圖形。這些類的關(guān)系結(jié)構(gòu)如下：
由于MACS-SCADA系統(tǒng)不支持圖層的嵌套，但是SVG文檔是可以多級圖層嵌套的，故導入時需要進行將圖層內(nèi)部的嵌套圖層轉(zhuǎn)換為系統(tǒng)中的組合對象。
SVG中任一圖形對象都具有transform屬性，transform屬性中最復雜的變換方式就是矩陣變換，對應(yīng)的二維坐標變換公式：
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)中心點為坐標原點（(0，0)，平移距離為（tx，ty），則對應(yīng)的SVG的矩陣變換公式為：
從而可得到以下對應(yīng)關(guān)系a = d = cos( )，b = -c = sin( )，e = tx，f = ty，旋轉(zhuǎn)的中心點為坐標原點（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)控畫面導出為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
北京市公安局海淀分局備案號：11010802023656號