基于SVG的座艙實習軟件設計與實現

司慧民 劉向國

摘 ?要：飛行員在進行座艙的初步學習的時候，只使用靜態打印的座艙圖，對學員熟悉座艙的效果不是很理想。提出了一種基于SVG的交互式座艙實習軟件的設計實現方法。該方法采用SVG技術實現，顯示整張的座艙圖，鼠標在座艙圖移動或者點擊座艙圖上的相關區域，能夠進行交互式學習。文章分析了SVG文件格式的特點，提出了SVG文件的制作和加工方法，以及在軟件層面圖像放大、“熱區”等功能的設計，實現了基于SVG的座艙實習軟件。

關鍵詞：SVG;飛行員;座艙實習

中圖分類號：TP311.52 ? ? ?文獻標識碼：A 文章編號：2096-4706（2020）13-0071-03

Abstract：The pilot only uses the static printed cockpit map in the preliminary study of the cockpit，which is not ideal for the students to be familiar with the cockpit. This paper presents a design and implementation method of interactive cockpit practice software based on SVG. This method uses SVG technology to display the whole cockpit map，and the mouse can move or click the relevant area on the cockpit map to carry out interactive learning. This paper analyzes the characteristics of SVG file format，puts forward the method of making and processing SVG file，as well as the design of image magnification and “hot area” functions at the software level，and realizes the cockpit practice software based on SVG.

Keywords：SVG;pilot;cockpit practice

0 ?引 ?言

近年來，信息化輔助教學手段越來越豐富。飛行員在進行航理知識學習、熟悉座艙布局時會接觸到各型飛機的座艙圖。為了使飛行員更好地進行自學，筆者在制作某型飛機的座艙實習軟件時，采用了電子版座艙圖。該軟件采用Delphi編程，基于SVG（Scalable Vector Graphics，可縮放矢量圖像）技術，對座艙圖中包含的所有設備劃分了“熱區”。軟件運行時，當鼠標滑過“熱區”，顯示相應的部件名稱和簡要說明，當鼠標單擊“熱區”時，顯示設備的實物正視圖[1]。

W3C推出的SVG技術是專門為網絡設計的，采用XML文本形式存儲的圖像格式，它以短小靈活的矢量圖形、標準的開放性以及同其他標準（XSL、DOM等）的兼容性而被稱為下一代互聯網圖形標準。本文設計和實現了基于SVG的座艙實習軟件[2]。

1 ?SVG的概念

SVG是一種圖像格式文件，為可縮放的矢量圖形，是一種基于XML語言，用來描述二維矢量圖形的圖像格式[3]。嚴格來說應該是一種開放標準的矢量圖形語言，用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具來打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。

SVG圖形具有以下幾個特點：格式標準、方便擴展、便于操作[4]。格式標準是指SVG文檔完全遵循XML標準，支持完整的XML和DOM接口。方便擴展是指SVG預定義好了一批基本圖形元素，比如圓形、三角形、矩形、多邊形等，通過將這些圖形進行組合可以得到更多的復雜圖形。便于操作是指SVG格式有方便快捷的編輯制作工具，而且各種編程語言和腳本語言都提供了對SVG圖像中的元素進行操作的應用編程接口[5]。

2 ?SVG文件的制作

SVG文件可以通過Adobe公司的AI（Adobe Illustrator）軟件來進行制作。為了使軟件能夠在大多數顯示器上正常顯示，在本軟件中采用了大小為1 024*768像素的座艙圖作為底圖。

2.1 ?初始SVG文件的制作

在AI軟件中打開座艙圖作為最下面的圖層，在該圖層上針對各個部件采用鋼筆工具勾勒部件的輪廓（邊沿），這個輪廓將來可以在軟件中作為“熱區”。需要注意的是輪廓一般使用多邊形工具進行勾畫。為了后期在程序中能夠正常判斷“熱區”，勾畫的終點一定要和起點重合，形成閉合的多邊形。

AI文件制作完成以后，通過“另存為”可以保存為SVG文件。可以看到SVG文件格式遵循XML格式，多邊形由構成多邊形的各個點的橫縱坐標來表示，精確到小數點后一位數字。SVG文件的格式如下（示例簡要部分）：

<？xml version="1.0" encoding="utf-8"？>

2.2 ?SVG文件的加工

為了便于程序對SVG文件的解析，還需要把以上的SVG文件進行適當精簡，并加入我們需要的座艙部件信息。精簡的主要方法是：舍掉坐標的小數位，去掉一些無關的標注元素。另外還需要加入設備信息、設備詳細描述文件、鏈接的圖片文件、頂點數目等信息。最終生成的SVG信息文件就可以在程序中使用了。文件格式如下（精簡）：

PathName：部件名稱1 RTFFile：1 PicFile：1 VertXCount： 12 Points：471，62 463，78 458，98 457，118 461，135 465，140 562，139 566，127 568，105 563，84 559，72 553，62

PathName：部件名稱2 RTFFile：2 PicFile：2 VertXCount：6 Points：444，175 445，206 446，213 471，214 468，206 467，176

PathName：部件名稱3 RTFFile：2-1 PicFile：2-1 VertXCount： 6 Points：558，175 555，207 555，215 577，215 580，206 582，175

如上文件所示，PathName后的文字為部件名稱;RTFFile后的文字為設備詳細描述文件;PicFile后文字為鏈接的圖片名稱;VertXCount后的數字為部件多邊形的頂點數目;Points后的坐標值為各個頂點的橫縱坐標。

為了防止SVG文件被最終用戶隨意改動導致程序運行出錯，還對SVG文件進行了簡單的二進制加密。加密的代碼如下：

M ：= TMemoryStream.Create ;

AssignFile（file_of_byte， SourcePanfile）;

Reset（file_of_byte）;

file_size ：= FileSize（file_of_byte）;

CloseFile（file_of_byte）;

M.LoadFromFile（SourcePanfile）;

m.Position ：= 0 ;

J ：= 0;

While j

begin

I ：= M.Read（B，1）;

If B >= 128 then

tempB ：= B - 128

else

tempB ：= B + 128 ;

m.Seek（-1，1）;

m.Write（tempb，1）;

J ：= J + 1;

end;

m.Position ：= 0 ;

m.SaveToFile（'cabin.pan'）;

M.Free;

加密以后的SVG文件改名為cabin.pan。

3 ?座艙實習程序的制作

3.1 ?變量的定義

軟件在加載初始化時首先在內存中對SVG文件進行解密，然后加載cabin.pan所描述的多邊形路徑到內存。讀取SVG文件的流程圖如圖1所示。

在Delphi語言中沒有指針，因此用動態數組來替代，定義Paths為二維數組，儲存cabin.pan文件中定義的所有坐標點。定義PathRegions為多邊形數組，儲存定義的所有多邊形。如下所示：

Paths：array of array of TPoint;//定義二維數組;

PathRegions：array of hRgn;//定義多邊形數組;

在程序加載過程中分別給二維數組Paths和多邊形數組PathRegions賦值：

SetLength（Paths，PathCount + 1）;//設置Paths的一維邊界;

SetLength（Paths[I]，VertxCount）;//設置Paths的二維邊界;

SetLength（PathRegions， I + 1）;//設置多邊形數組的項數;

通過循環把Path的各個頂點值加載到多邊形數組里面：

PathRegions[I]：= Createpolygonrgn（temppoint[0]，VertxCount，ALTERNATE）;

在程序運行過程中，通過判斷當前的鼠標坐標值完成兩項工作：一項是對座艙圖的局部進行放大，另一項是顯示座艙部件的名稱和簡要說明。

3.2 ?座艙放大功能的實現

軟件默認加載的座艙圖大小為1 024*768像素，這張圖稱為小圖。因為圖片放大后會失真，因此需要在程序啟動時在內存中加載一張分辨率比較大的座艙圖（4 096*3 072像素），這張圖稱為大圖。大圖的尺寸能夠使得座艙細節顯示清晰醒目。在程序運行過程中，通過判斷鼠標在小圖的相對位置，映射到大圖對應的位置，并把大圖對應位置的內容顯示在窗口的左上方，實現放大功能。這個功能用到了Win32的API函數BitBlt，使用SRCCOPY參數。

3.3 ?座艙“熱區”功能的實現

顯示座艙部件的名稱和簡要說明，首先需要判斷當前鼠標的位置是在座艙圖哪個部件的“熱區”內。并對“熱區”的邊緣進行加紅加粗并增加陰影，同時顯示部件的名稱和簡要說明。當點擊鼠標時，顯示當前點擊部件的實物正視圖。通過實物正視圖可以把部件看得更加清楚直觀，尤其對于座艙兩側的面板，在普通的座艙圖中是斜45°方向，轉換為正視圖以后更加符合視覺習慣。判斷“熱區”用到了Win32的API函數PtInRegion。代碼如下：

for I ：= 0 to High（Paths） do

begin

if PtInRegion（PathRegions[I]，NowMousex，NowMousey） then

begin

NowDisplayPathIndex ：= I ;

ShowPathRegion（I）;

timHideHint.Enabled ：= False;

break;

end;

end;

實現“熱區”加紅加粗的效果需要在座艙圖上方放置一張比當前“熱區”所占的長方形區域的長和寬各大3個像素的圖片，首先把座艙圖上包含“熱區”范圍的圖片拷貝到上方圖片，然后使用Canvas.Pen、Canvas.PolyLine等工具把“熱區”所在的多邊形描繪出來，使得“熱區”所在的部件加紅、加粗且有陰影。代碼如下：

for J ：= 0 to High（Paths[PathIndex]） do

ShowB[J]：= Point（Paths[PathIndex，J].X - image_paint_polygon.Left ， Paths[PathIndex，J].Y - image_paint_polygon.Top ）;

ShowB[J] ：= ShowB[0];

image_paint_polygon.Canvas.Pen.Color ：= clred;

image_paint_polygon.Canvas.Pen.Width ：= 3;

image_paint_polygon.Canvas.PolyLine（showB）;

為了顯示部件的名稱和說明，還需要使用一個TLabel控件，跟隨鼠標位置實時顯示當前“熱區”的名稱以及相關說明，為了顯示更加穩定，應使得控件出現在“熱區”的中央，使鼠標在“熱區”內移動時Label控件位置不變。另外為了程序更加流暢，采用了TTimer控件來傳遞顯示參數，避免程序隨著鼠標移動而反復快速執行導致響應變慢。針對鼠標移動的程序處理流程圖如圖2所示。

4 ?結 ?論

本文主要研究方向是利用SVG技術為座艙圖建立“熱區”，使鼠標在座艙圖上滑動時，能夠高亮顯示部件以及相應的學習內容，單擊以后顯示部件的實物正視圖以及部件相關說明，使得電子座艙圖具有了交互性。本文中所述內容已經在某機型輔助訓練軟件中得到了實現，在飛行員自學、綜合串講等場合得到了較好的運用，使用效果良好。利用該軟件飛行員能夠直觀地了解座艙中各個部件的設備名稱和性能特征，熟悉座艙布局，加深印象、提高學習效果。

參考文獻：

[1] 王仲，董欣，陳曉鷗.SVG——一種支持可縮放矢量圖形的Web瀏覽語言規范 [J].中國圖象圖形學報，2000（12）：1039-1043.

[2] W3C. Scalable Vector Graphics （SVG） 1.1 Specification [EB/OL].（2003-01-14）. https：//www.w3.org/TR/SVG11/.

[3] 麻風梅.基于SVG的網絡數學圖形編輯系統設計與實現 [J].計算機與數字工程，2010，38（4）：118-120.

[4] 劉遵雄，況志軍，高玉柱.基于SVG的電力圖形系統的實現 [J].繼電器，2005（21）.

[5] 侯宇，李素有.基于XML的SVG技術及其應用 [J].計算機應用研究，2002（5）：136-138.

作者簡介：司慧民（1978—），男，漢族，山西襄汾人，副教授，碩士，研究方向：計算機軟件、網絡;劉向國（1972—），男，漢族，河北滄州人，副教授，本科，研究方向：飛機特種設備、電氣系統。