大家好，我是雷工！

本篇学习精灵图的制作，以下为学习内容及相关笔记。

一、什么是精灵图

精灵图是一种在外观上类似组合图，但内部嵌入了比较丰富的动画链接与逻辑控制，工程开发人员只要将其从精灵图库中调出来放置在开发画面上，然后再做少量的修改，就能完成较复杂的控制功能。

精灵图可以由图元对象、自定义变量、自定义属性及动画处理4部分组成。组成精灵图的图元对象可以是直线、曲线、矩形，圆形等基本图元或者它们的组合图，也可以是精灵图对象，即精灵图的开发是可以实现嵌套的。

KingSCADA3.8的精灵图库中提供了大量的实际工程中经常会应用的精灵图，用户可以直接应用，假如精灵图库中没有满足我们应用要求的精灵图，我们也可以自己开发精灵图，然后将其放到图库中，供日后开发重复使用。

下面可以制作一个温度指示的精灵图，这个精灵图既可以显示温度数值，也能够显示温度的高低指示。

二、了解精灵图开发界面

在KingSCADA3.8图形编辑器中，点击“文件”菜单中的“新建->精灵图”,

弹出精灵图开发界面如下图所示：

精灵图开发界面与图形开发界面差不多，都是由菜单栏、工具栏、工具箱、图形编辑区、属性窗口等组成，操作方法也基本类似。唯一不同的点是，图形模型具有传播性，当对工程图形模型进行改动后，工程中该模型的所有对象都能自动做出相应改动，也就是对工程图形模型的修改能够传播到其他的对象中，而精灵图不具备这样的特性，精灵图被引用到画面中后，只能在画面中进行修改。

三、制作精灵图

1、制作精灵图外形：

在图形编辑区编辑我们要做的精灵图形的外观，我们先利用矩形图元、文本图元，绘制出精灵图的各个组成部分，各个部分的颜色需要通过调色板进行调整，设置出我们需要的色彩。这个精灵图的外观有如下5部分：

将各组成部分组合起来，合成我们需要的精灵图形，如下图所示：

2、创建精灵图的属性、变量

创建精灵图时我们需要考虑好精灵图在使用中需要暴露出哪些属性，需要具备哪些功能。以这个温度显示为例，我们需要的属性包含：整体的背景色、需要动态显示的温度指示的颜色、温度指示的量程范围。需要关联温度值的变量。

定义属性：单击右侧“内容”标签，选中“属性”点击右键在弹出的右键菜单中执行“添加属性”命令：

弹出如下图所示的属性配置对话框，我们先定义背景色，属性名称：BackColor，属性类型：Brush。点击“默认”后面的图标弹出调色板，通过调色板设置默认的画刷类型。

按照这种方式我们可以再定义三个属性，温度指示颜色：WColor，类型：Brush；温度量程的最大值：Max，最小值Min，类型Float。

如下图所示，完成四个属性的定义。

变量定义：在这里建立的变量是局部变量，只能应用在精灵图中，不能用在工程的其他地方。参数定义完成后我们定义关联温度值的变量。如下图所示，点击右键“添加变量”，弹出变量配置对话框。

变量名称设置为：TValue，变量类型设置为：Float，初始值：0。

精灵图的属性、变量配置完成。接下来定义精灵图的动画链接。

3、创建精灵图的动画链接

精灵图的动画链接主要是指将前面定义的属性、变量与精灵图的具体图元链接起来。

首先我们链接温度指示精灵图的面板背景色，选中作为背景的圆角矩形，设置Brush属性，点击Brush属性后面的图标按钮，

弹出如图所示对话框，双击选择前边定义的BackColor属性，点击“确定”完成此属性的链接。

同样的方法，我们继续设置温度指示的颜色属性，选中作为温度指示的矩形（第4个），设置Brush属性，点击Brush属性后面的图标按钮，弹出上图所示的对话框，选择前面定义的WColor属性，点击“确定”完成此属性的链接。

接着再设置温度指示的缩放的动画链接，再次选中作为温度指示的矩形（第4个），选择“连接”，点击“+”增加动画连接，如下图所示，选择“缩放——>垂直缩放”的动画连接。

弹出如下图所示的对话框，然后进行相关设置：

选择关联的变量：TValue，此处只能够选择定义的精灵图的内部变量。

选择缩放类型为：线性缩放。选择缩放的参考中心为：下。

设置最小时对应的数值：点击图标弹出如上图【BackColor属性选择】所示的对话框，选择属性Min，然后确定。

设置最大时对应的数值：点击图标弹出如上图【BackColor属性选择】所示的对话框，选择属性Max，然后确定。

设置完成后如下图所示。点击确定完成设置。

4、保存精灵图

完成所有的动画连接后，精灵图的开发也就完成了。单击“文件”菜单中的“保存”命令，弹出精灵图库对话框如下图所示：我们选中最上面的“精灵图图形文件夹”，点击右键弹出菜单，选择“新建目录”创建一个新的文件夹，给文件夹命名，例如：雷工-精灵图。然后给这个精灵图命名，例如：温度指示。这样一个精灵图就完成了。

保存之后再打开精灵图，如下图所示：

精灵图的制作不仅仅是用基本作图工具来绘制，我们也可以利用现有的精灵图通过修改来生成新的精灵图。

四、应用精灵图

1、通过虚拟串口虚拟一对串口，COM6，COM7；

2、使用Modbus Slave软件虚拟MODBUS从站设备连接COM7；

3、KingSCADA的IOServer 连接COM6；

4、编辑画面添加创建的精灵图，变量连接添加的IO变量；

5、运行效果：