图4-22 保存精灵图
1
图4-23 保存精灵图2
第三节 制作图形模型
图形模型:模拟现实中的生产设备,如锅炉、电机设备的图形展示、动画连接、安全设置、脚本语言等,把这些功能组合在一起形成图形模型,用户在使用时只需要将模型实例化,即对图形模型进行一系列配置,可以快速把图形展示及动态效果部署到工程中。
图形模型相对于图库精灵的优势在于不仅仅具有动画连接,还可以编写脚本程序,同时当模型重新编辑后,会把产生变化的内容更新到已经实例化的模型对象中。 我们将前面做的精灵图与罐结合起来制作一个图形模型来在本培训工程中使用。制作过程如下:
第一步:制作图形模型的外观:
在KingSCADA3.1开发环境的目录中选择“视图”→“图形模型”选项,在右侧编辑区中单击“新建”按钮,弹出对话框,如图4-24所示:
图4-24创建图形模型对话框
在图4-24中输入图形模型的名称如:罐,并根据需要设置该模型的其他选项,如:模型描述、创建者、等。
设置完毕后,单击“确认”按钮,该模型出现在开发环境的右侧编辑区中,如图4-25
所示:
图4-25编辑区中的图形模型
在图4-25中选中模型图标,双击图形模型图标,弹出对话框,如图4-26所示:
图4-26图形模型开发界面
图形模型开发界面与图形编辑器界面具有相同的布局,由菜单栏、工具栏、图形编辑区、属性窗口和连接窗口等构成。
我们利用基本作图工具椭圆、矩形框来制作罐体的外观,罐体(椭圆、矩形框)使用过渡色来体现金属质感,以增加罐体的美观程度。过渡色的设置可以通过Brush属性来设置。我们在罐体上添加一个可以显示液位高度的图素,利用圆角矩形和文本来实现。圆角矩形通过设置Pen,Brush来设置提高图素美观程度。文本T可以修改文本的颜色、字体。
如图4-27所示:为了以后在说明时简单一些,我们将罐体设为A图素,圆角矩形设为B图素,文本设置C图素。
图4-27 图素制作
罐体设置完成后我们将精灵库中前面已经做好的精灵图取出来放置在罐体上面。
点击工具栏图标弹出精灵图库对话框,选择我们前面定义的精灵图文件夹“my
genius”,如图4-28所示,选择右侧区域的液位指示的精灵图,双击此精灵图,然后放置在图形编辑区域。精灵图我们就叫图素D。
然后我们将精灵图与前面画的各种图素组合起来就制作完了了一个罐的图形模型的外观了。如图4-29所示的罐的图形外观。在组合图素的时候我们会用到图素上下层的调整,可以选中图素,点击右键,通过右键菜单“位置”来调整,如图4-13所示。
图4-28 精灵图库
图4-29 图形模型外观
第二步:建立图形模型的属性、变量:
制作属性、变量的方法与前面制作图库精灵的方法相似,具体操作可以参考前面讲解精灵图的属性、变量定义部分。
定义的图形模型的属性为:罐体颜色(图素A的颜色)、面板颜色(精灵图D背景色)、液位指示颜色(精灵图D液位指示颜色)、文本框颜色(图素B的背景色)、字体大小(图素C的字体)、Max、Min(对应精灵图D的Max、Min属性,也就是液位的最大值、最小值),其中颜色类型选择Brush,字体类型选择Font,Max、Min选择float类型。如图4-30所示:
图4-30 图形模型属性设置
定义图形模型的变量为:液位高度。此变量主要是与液位指示的精灵的变量进行关联显示液位,以及与文本(图素C)进行模拟值输出的关联。 第三步:建立图形模型的动画连接:
图形模型的动画连接与前面讲解的精灵图的动画连接相似,主要是将我们前面定义的属性、变量与图形模型的具体图素关联起来。 建立图形与属性的关联:
首先我们将罐体(图素A)的颜色与“罐体颜色”属性关联起来,选中作为罐体的圆角矩形,在右侧的属性栏中设置Brush属性,点击Brush
属性后面的按钮,弹出如图4-31所示对话框,选择我们前面定义的“罐体颜色”属性,点击OK完成此属性的关联。同样的方式选择作为罐体一部分的椭圆,进行Brush属性的设置。
图素B的颜色设置,选中圆角矩形然后设置右侧属性的Brush属性,点击Brush
属性后面的按钮弹出如图4-30所示对话框,关联图形模型的“文本框颜色”属性。 文本图素C选择“##”,然后设置右侧属性的TextFont属性,点击TextFont
属性后面的按钮弹出如
图4-30所示对话框,关联到图形模型的“字体大小”属性。
图4-30 选择属性
设置精灵图D的属性,选中精灵图,右侧精灵图的属性如图4-31所示,首先设置“BackColor”属性,点击BackColor
属性后面的按钮弹弹出如图4-30所示对话框,关联图形模型的“面板颜色”属性。同样的方式设置“fluidcolor”属性,关联图形模型的“液位指示颜色”属性。设置“Max”属性,关联图形模型的“Max”属性。设置“Min”属性,关联图形模型的“Min”属性。属性设置完成后,图形模型的属性变为如图4-32所示。
KingSCADA教程 doc - 图文
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)