司慧民 刘向国
摘 要：飞行员在进行座舱的初步学习的时候，只使用静态打印的座舱图，对学员熟悉座舱的效果不是很理想。提出了一种基于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文件的格式如下（示例简要部分）：
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—），男，汉族，河北沧州人，副教授，本科，研究方向：飞机特种设备、电气系统。