WINCC 使用 SVG 制作水流动画

自控技术FAQ · 3 天前

1

了解SVG

可缩放矢量图形（Scalable Vector Graphics，SVG）是一种基于可扩展标记语言XML，用于描述二维矢量图形的图形格式，支持交互性和动画。严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，图像在放大或改变尺寸的情况下其图形质量不会有所损失。与 JPEG、PNG 和 GIF 图像比起来，尺寸更小、可压缩性更强。

2001年9月4日SVG 1.0发布；2011年8月16日发布SVG 1.1（第2版），为W3C目前推荐的标准。

SVG 2 目前正在开发中，它将为 SVG 添加新的易用特性，并与 HTML、CSS 和 DOM 更紧密地集成。

尽管它是一种主要用于 Web 的矢量图形格式，也正在各种应用上得到更广泛的部署。如WINCC7.5 起提供了可动态化的SVG对象库。

一个SVG图片，用文本打开的内容：

<svg version="1.1" baseProfile="full" width="300" height="100" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="#009999" /> <text x="150" y="60" font-size="32" text-anchor="middle" fill="white">SCADA FAQ

SVG文件必须使用 .svg 后缀来保存。可通过任一类型的文本编辑器进行创建和编辑。

可以直接在HTML页面嵌入此SVG代码

<html><body><svg version="1.1" baseProfile="full" width="300" height="100" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="#009999" /> <text x="150" y="60" font-size="32" text-anchor="middle" fill="white">WINCC SVG

打开页面，运行结果：

WINCC SVG

2

添加SVG对象

添加管道对象到画面

打开SVG库，从“SVG全局库——IndustryGraphicLibraryV2.0——Pipes-Overlays+Arrows”，添加SVG箭头图片Arrow90Right、ArrowUp到画面

设置箭头属性：“图形——保持纵横比调”为“否”，然后调整箭头到合适的尺寸

通过属性：“符号属性——BasicColor”，设置需要的颜色

然后复制多个箭头，组成水流

3

自定义对象

选中所有的箭头，打开图形编辑器菜单：编辑——自定义对象——创建，创建一个自定义对象

打开自定义对象组态对话框

选择左侧属性“用户定义2”，再选择“SVG对象1”，然后鼠标双击右侧列出的“HighlightToggle”属性

这样在“用户定义2”下为自定义对象添加“HighlightToggle”属性，其包含了“SVG对象1”的“HighlightToggle”属性

然后选择刚才添加的属性“HighlightToggle”，再选择“SVG对象2”，然后鼠标双击列出的“HighlightToggle”属性。

“SVG对象3”～“SVG对象7”执行相同的操作，完成属性添加。

4

动态设置

变量管理器添加一个内部“二进制”变量tag1，作为实际过程中触发水流流动的信号，画面添加2个按钮，控制tag1变量的值。

设置，自定义对象属性：其它——显示，关联变量tag1

运行中通过周期切换属性“HighlightToggle” 值，形成水流流动动画。为运行人员提供形象的过程状态示意。

为自定义对象属性：用户定义2——HighlightToggle，添加如下C脚本

#include "apdefap.h" BOOL _main(char* lpszPictureName, char* lpszObjectName, char* lpszPropertyName){BOOL HighlighToggle;if(GetTagBit("tag1")) HighlighToggle =!GetPropBOOL(lpszPictureName,lpszObjectName,lpszPropertyName);return HighlighToggle;}

根据需要设置脚本触发周期如500ms。

激活项目运行：

- - - 正文 - - - - - - 结束 - - -

后台回复『WINCC』阅读更多相关文章。

---

如果你有与本文相关问题可以留言或后台发消息，欢迎点分享、收藏、点赞、在看。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！