【KingSCADA】什么是精灵图以及如何创建精灵图

news/2024/4/18 18:41:08/文章来源:https://blog.csdn.net/u013097500/article/details/130337524

大家好，我是雷工！
本篇学习精灵图的制作，以下为学习内容及相关笔记。

一、什么是精灵图

精灵图是一种在外观上类似组合图，但内部嵌入了比较丰富的动画链接与逻辑控制，工程开发人员只要将其从精灵图库中调出来放置在开发画面上，然后再做少量的修改，就能完成较复杂的控制功能。
精灵图可以由图元对象、自定义变量、自定义属性及动画处理4部分组成。组成精灵图的图元对象可以是直线、曲线、矩形，圆形等基本图元或者它们的组合图，也可以是精灵图对象，即精灵图的开发式可以实现嵌套的。
KingSCADA3.8的精灵图库中提供了大量的实际工程中经常会应用的精灵图，用户可以直接应用，假如精灵图库中没有满足我们应用要求的精灵图，我们也可以自己开发精灵图，然后将其放到图库中，供日后开发重复使用。
下面可以制作一个温度指示的精灵图，这个精灵图既可以显示温度数值，也能够显示温度的高低指示。

二、了解精灵图开发界面

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

在这里插入图片描述

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

【精灵图开发界面】

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

三、制作精灵图

1、制作精灵图外形：

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

将各组成部分组合起来，合成我们需要的精灵图形，如下图所示：
在这里插入图片描述

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

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

定义属性：单击右侧“内容”标签，选中“属性”点击右键在弹出的右键菜单中执行“添加属性”命令：
在这里插入图片描述
弹出如下图所示的属性配置对话框，我们先定义背景色，属性名称：BackColor，属性类型：Brush。点击“默认”后面的弹出调色板，通过调色板设置默认的画刷类型。
【定义属性】
按照这种方式我们可以再定义三个属性，温度指示颜色：WColor，类型：Brush；温度量程的最大值：Max，最小值Min，类型Float。

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

变量名称设置为：TValue，变量类型设置为：Float，初始值：0。
精灵图的属性、变量配置完成。接下来定义精灵图的动画链接。

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

精灵图的动画链接主要是指将前面定义的属性、变量与精灵图的具体图元链接起来。
首先我们链接温度指示精灵图的面板背景色，选中作为背景的圆角矩形，设置Brush属性，点击Brush属性后面的在这里插入图片描述按钮，

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

接着再设置温度指示的缩放的动画链接，再次选中作为温度指示的矩形（第4个），选择“连接”，点击“+”增加动画连接，如下图所示，选择“缩放——>垂直缩放”的动画连接。
在这里插入图片描述
弹出如下图所示的对话框，然后进行相关设置：

选择关联的变量：TValue，此处只能够选择定义的精灵图的内部变量。
选择缩放类型为：线性缩放。选择缩放的参考中心为：下。
设置最小时对应的数值：点击在这里插入图片描述弹出如上图【BackColor属性选择】所示的对话框，选择属性Min，然后确定。
设置最大时对应的数值：点击弹出如上图【BackColor属性选择】所示的对话框，选择属性Max，然后确定。
设置完成后如下图所示。点击确定完成设置。
【缩放动画连接定义】

4、保存精灵图

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

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