基于SVG的座艙實(shí)習(xí)軟件設(shè)計(jì)與實(shí)現(xiàn)

司慧民 劉向國

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

關(guān)鍵詞：SVG;飛行員;座艙實(shí)習(xí)

中圖分類號：TP311.52 ? ? ?文獻(xiàn)標(biāo)識碼：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 ?引 ?言

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

W3C推出的SVG技術(shù)是專門為網(wǎng)絡(luò)設(shè)計(jì)的，采用XML文本形式存儲的圖像格式，它以短小靈活的矢量圖形、標(biāo)準(zhǔn)的開放性以及同其他標(biāo)準(zhǔn)（XSL、DOM等）的兼容性而被稱為下一代互聯(lián)網(wǎng)圖形標(biāo)準(zhǔn)。本文設(shè)計(jì)和實(shí)現(xiàn)了基于SVG的座艙實(shí)習(xí)軟件[2]。

1 ?SVG的概念

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

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

2 ?SVG文件的制作

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

2.1 ?初始SVG文件的制作

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

AI文件制作完成以后，通過“另存為”可以保存為SVG文件?？梢钥吹絊VG文件格式遵循XML格式，多邊形由構(gòu)成多邊形的各個點(diǎn)的橫縱坐標(biāo)來表示，精確到小數(shù)點(diǎn)后一位數(shù)字。SVG文件的格式如下（示例簡要部分）：

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

2.2 ?SVG文件的加工

為了便于程序?qū)VG文件的解析，還需要把以上的SVG文件進(jìn)行適當(dāng)精簡，并加入我們需要的座艙部件信息。精簡的主要方法是：舍掉坐標(biāo)的小數(shù)位，去掉一些無關(guān)的標(biāo)注元素。另外還需要加入設(shè)備信息、設(shè)備詳細(xì)描述文件、鏈接的圖片文件、頂點(diǎn)數(shù)目等信息。最終生成的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后的文字為設(shè)備詳細(xì)描述文件;PicFile后文字為鏈接的圖片名稱;VertXCount后的數(shù)字為部件多邊形的頂點(diǎn)數(shù)目;Points后的坐標(biāo)值為各個頂點(diǎn)的橫縱坐標(biāo)。

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

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 ?座艙實(shí)習(xí)程序的制作

3.1 ?變量的定義

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

在Delphi語言中沒有指針，因此用動態(tài)數(shù)組來替代，定義Paths為二維數(shù)組，儲存cabin.pan文件中定義的所有坐標(biāo)點(diǎn)。定義PathRegions為多邊形數(shù)組，儲存定義的所有多邊形。如下所示：

Paths：array of array of TPoint;//定義二維數(shù)組;

PathRegions：array of hRgn;//定義多邊形數(shù)組;

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

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

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

SetLength（PathRegions， I + 1）;//設(shè)置多邊形數(shù)組的項(xiàng)數(shù);

通過循環(huán)把Path的各個頂點(diǎn)值加載到多邊形數(shù)組里面：

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

在程序運(yùn)行過程中，通過判斷當(dāng)前的鼠標(biāo)坐標(biāo)值完成兩項(xiàng)工作：一項(xiàng)是對座艙圖的局部進(jìn)行放大，另一項(xiàng)是顯示座艙部件的名稱和簡要說明。

3.2 ?座艙放大功能的實(shí)現(xiàn)

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

3.3 ?座艙“熱區(qū)”功能的實(shí)現(xiàn)

顯示座艙部件的名稱和簡要說明，首先需要判斷當(dāng)前鼠標(biāo)的位置是在座艙圖哪個部件的“熱區(qū)”內(nèi)。并對“熱區(qū)”的邊緣進(jìn)行加紅加粗并增加陰影，同時顯示部件的名稱和簡要說明。當(dāng)點(diǎn)擊鼠標(biāo)時，顯示當(dāng)前點(diǎn)擊部件的實(shí)物正視圖。通過實(shí)物正視圖可以把部件看得更加清楚直觀，尤其對于座艙兩側(cè)的面板，在普通的座艙圖中是斜45°方向，轉(zhuǎn)換為正視圖以后更加符合視覺習(xí)慣。判斷“熱區(qū)”用到了Win32的API函數(shù)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;

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

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控件，跟隨鼠標(biāo)位置實(shí)時顯示當(dāng)前“熱區(qū)”的名稱以及相關(guān)說明，為了顯示更加穩(wěn)定，應(yīng)使得控件出現(xiàn)在“熱區(qū)”的中央，使鼠標(biāo)在“熱區(qū)”內(nèi)移動時Label控件位置不變。另外為了程序更加流暢，采用了TTimer控件來傳遞顯示參數(shù)，避免程序隨著鼠標(biāo)移動而反復(fù)快速執(zhí)行導(dǎo)致響應(yīng)變慢。針對鼠標(biāo)移動的程序處理流程圖如圖2所示。

4 ?結(jié) ?論

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

參考文獻(xiàn)：

[1] 王仲，董欣，陳曉鷗.SVG——一種支持可縮放矢量圖形的Web瀏覽語言規(guī)范 [J].中國圖象圖形學(xué)報，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] 麻風(fēng)梅.基于SVG的網(wǎng)絡(luò)數(shù)學(xué)圖形編輯系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [J].計(jì)算機(jī)與數(shù)字工程，2010，38（4）：118-120.

[4] 劉遵雄，況志軍，高玉柱.基于SVG的電力圖形系統(tǒng)的實(shí)現(xiàn) [J].繼電器，2005（21）.

[5] 侯宇，李素有.基于XML的SVG技術(shù)及其應(yīng)用 [J].計(jì)算機(jī)應(yīng)用研究，2002（5）：136-138.

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