WINCC 使用 SVG 制作水流动画
WINCC 使用 SVG 制作水流动画
scadafaq
个人公众号『ScadaFAQ』，作者：RobinLiu，分享自控scada技术相关内容（在公众号底部菜单查看更多精彩内容）。
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 的矢量图形格式，也正在各种应用上得到更广泛的部署。如WINCC画面支持SVG图形对象。
一个SVG图片，用文本打开的内容：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<
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
</
text
>
</
svg
>
SVG文件必须使用 .svg 后缀来保存。可通过任一类型的文本编辑器进行创建和编辑。
可以直接在HTML页面嵌入此SVG代码
<!DOCTYPE html>
<
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
</
text
>
</
svg
>
</
body
>
</
html
>
打开页面，运行结果：
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 』 阅读更多相关文章。
如果你有与本文相关问题可以留言或后台发消息， 欢迎 点分享、收藏、点赞、赏 。
来根banana～
微信扫一扫赞赏作者
赞赏
发送给作者
人赞赏
长按二维码向我转账
来根banana～
受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。