CN109255046A - 矢量图元的动态实现方法 - Google Patents

Abstract

本发明公开了一种矢量图元的动态实现方法，本发明在静态SVG图元文件上增加动态属性标签，内容有动作类型(旋转、闪烁、填充、移动、显示/隐藏、文字变化等)，满足动作的条件(如：运行、故障、关闭等)，然后解析SVG文件中的标签，并根据内容生成JavaScript的逻辑代码。本发明具有既保留了SVG原有的可伸缩性和可交互性，又增加了图元的动态展示性，提高了工业监控系统页面的可读性、可操作性、可扩展性的特点。

Description

矢量图元的动态实现方法

技术领域

本发明涉及监控系统页面展示技术领域，尤其是涉及一种可支持监控系统页面缩放、各种分辨率切换、窗口自适应布局、静态图元动画效果展现的矢量图元的动态实现方法。

背景技术

传统的工业监控系统页面，分辨率往往是固定大小，绘制的图形不具备窗口自动布局的功能，通常用的不是矢量图，缩放效果不理想，放大后通常会失真。如果投到大屏上既无法满足显示要求，也不美观，有时还会因为分辨率问题导致图形的显示异常和变形等。

另外，自主研发的组态软件往往技术选型老旧，维护成本较高，展现方式单一，无法跨平台使用(一般只支持windows系统)，无法跨终端使用(一般只支持电脑端，不支持平板和移动终端)。

目前常见的基于SVG的系统中，一般只使用静态图形或简单动画的展示，没有动态元素的加入，不能使图形根据实际的情况实时变化显示，监控系统页面的可读性和可操作性较差。

发明内容

本发明的发明目的是为了克服现有技术中的工业监控系统页面不能根据实际的情况实时变化显示的不足，提供了一种可支持监控系统页面缩放、各种分辨率切换、窗口自适应布局、静态图元动画效果展现的矢量图元的动态实现方法。

为了实现上述目的，本发明采用以下技术方案：

一种矢量图元的动态实现方法，包括基于SVC的静态图元的矢量图形，与矢量图形对应的文本内容；静态图元有M种状态，文本内容中设有若干个节点，每个节点均设有class属性，M＞2；

包括如下步骤：

(1-1)预先设定矢量图形通过CSS方式实现的M-1种动画效果，给出各个动画效果的动画效果名称；

(1-2)通过JavaScript脚本语言获取矢量图形中需要动态显示的节点A，将节点A的class属性内容修改为预先设定的CSS方式动画效果的名称，可以实现节点的动态展示；

(1-3)为节点A增加标签，用于标识节点A相对应的设备在不同的状态下，节点A会展示不同的动态；对标签的内容进行解析；

(1-4)利用标签解析的内容生成一段JavaScript的脚本，当设备的实际状态数据变化时，JavaScript脚本根据设备的实际状态数据修改节点A的class属性，从而展现不同的动画效果。

本发明的目的在于解决支持监控系统页面缩放、各种分辨率切换以及窗口自适应布局等问题，还要解决基于SVG的静态图元，在满足某种特定的条件时，以不同的动画效果展现的问题。实现监控页面网页化，支持跨操作系统(Windows、Linux、Android、IOS等)，跨终端(电脑、手机、平板等)操作，采用国际通用标准，使用通用的专业绘图工具，达到图形美观且学习成本低，多终端下图元资源可以重复使用，降低工程成本的目的。

本发明提供了一种基于SVG实现静态矢量图元动态展现的一种方法，尤其设计规模庞大且设备图形复杂种类繁多的监控系统页面。本发明可以将基于SVG的静态矢量图元文件，通过增加标签，解析标签内容，以根据实际情况动态或静态显示，比如：空调外机这个设备图元，运行状态时旋转，停止状态时静止不动，故障状态时闪烁。既在满足不同条件时展现不同的动画效果。

本发明既保留了SVG原有的可伸缩性和可交互性，又增加了图元的动态展示性，提高了工业监控系统页面的可读性、可操作性、可扩展性等。

过程主要包括：在静态SVG图元文件上增加动态属性标签，内容有动作类型(旋转、闪烁、填充、移动、显示/隐藏、文字变化等)，满足动作的条件(如：运行、故障、关闭等)，然后解析SVG文件中的标签，并根据内容生成JavaScript的逻辑代码。

作为优选，M为3，3种状态分别为运行、停止和故障；动画效果为2种，2种动画效果分别为旋转和闪烁，运行与旋转相对应，故障与闪烁相对应；

作为优选，旋转动画的旋转动画名称为sup-rotate，闪烁动画的闪烁动画名称为sup-twinkle。

作为优选，

JavaScript脚本语言利用函数document.getElementsById()获得矢量图形中需要动态显示的节点A。

作为优选，利用class＝’sup-rotate’或class＝’sup-twinkle’的方式修改class属性的内容。

作为优选，所述标签的内容为sup-sign＝″’Run’：’sup-rotate’，’Stop’：”，’Fault’：’sup-twinkle’″，与节点A相对应的设备状态数据为工作状态Run时的动作为旋转，采用sup-rotate动画效果；与节点A相对应的设备状态数据为停止状态Stop时的动作为停止，无动画效果；与节点A相对应的设备状态数据为故障状态Fault时的动作是闪烁，采用sup-twinkle动画效果。

因此，本发明具有如下有益效果：本发明既保留了SVG原有的可伸缩性和可交互性，又增加了图元的动态展示性，提高了工业监控系统页面的可读性、可操作性、可扩展性等。

附图说明

图1为本发明的一种基于SVG图模一体化技术实现动态矢量图元生成过程；

图2为本发明的一种SVG矩形图元的结构示意图。

图3为本发明的一种HTML的CSS动画样式；

图4为本发明运行期的一种SVG图元状态示意图；

图5为本发明的风机设备的静态图元在添加动态的属性标签后，转换成可以实时变化的动态图元的一种示意图。

图中：矢量图形1。

具体实施方式

下面结合附图和具体实施方式对本发明做进一步的描述。

如图1所示的实施例是一种矢量图元的动态实现方法，包括基于SVG的静态图元的如图2所示的矢量图形1，与矢量图形对应的文本内容如下：

<svg>

<rectid＝“矩形”x＝“0”y＝“0”width＝“100”height＝“100”/>

</svg>

其中，svg为矢量图形文本内容的根节点；rect为矢量图形的子节点，代表一个矩阵；id为子节点的属性，是矩形在文本中的唯一标识；x为子节点的属性，是矩形在矢量图形中的X轴坐标；y为子节点的属性，是矩形在矢量图形中的Y轴坐标；width为子节点的属性，是矩形的宽度；height为子节点的属性，是矩形的高度。

假设静态图元有三种状态：运行、停止、故障，对其文本内容中的需要动画效果的节点增加标签，并通过标签内容赋予这个节点动态展示的逻辑。

首先，SVG图形在网页中可以通过CSS的方式实现动画效果，预先准备好CSS的几种动画效果，如图3所示，sup-rotate为旋转动画，sup-twinkle为闪烁动画，当修改SVG图形某个节点的class属性时，使class等于CSS的动画效果名称，SVG图形中的这个节点就会按照CSS的动画效果进行动态展示。

其次，可以通过JavaScript脚本语言来获取SVG图形中需要动态显示的节点，并通过修改修改节点的class属性来修改SVG节点的class属性内容，比如：通过document.getElementsById()方法来获取SVG图形中的节点，通过class＝’sup-rotate’方式来修改SVG图形中节点的class属性。可以通过JavaScript来实现SVG图形的动态展示。

对其文本内容中rect节点增加标签，标签内容为sup-sign＝″’Run’：’sup-rotate’，’Stop’：”，’Fault’：’sup-twinkle’″，如图4所示，标识图中rect节点在不同的条件下会展示不同的状态，接着来解析标签内容，数据为Run时动作是旋转，采用CSS的sup-rotate动画效果，数据为Stop时动作是停止，无动画效果，数据为Fault时动作是闪烁，采用CSS的sup-twinkle动画效果，需要注意的是添加的标签名不能与SVG语法的关键字标签名重名，但要是遵顼XML语法，标签内容要以JSON格式语法编写。

最后，根据解析的内容来生成一段JavaScript的脚本，如下为本发明生成的带有动作逻辑的JavaScript脚本：

矩形节点＝document.getElementsByld(“矩形”)

如果是工作状态

{矩形节点-＞class＝’sup-rotate’

}

如果是故障状态

{

矩形节点-＞class＝’sup-twinkle’

}

否则

{

矩形节点-＞class＝“”

}

Document是JavaScript语言中对文本内容的一个集合，包含很多属性和方法。

getElementsByld是Document的一个函数，可以通过文本中节点的id来得到节点对象。

将Run、Stop和Fault与实际数据关联，这样一来，当实际数据变化时，这段JavaScript脚本会根据实际数据，来修改SVG中动态节点的class属性，从而展现不同的动画效果，如图4所示。

为矩形SVG图元增加动态的JSON标签的文本内容如下：

<svg>

<rectid＝“矩形”

sup-sign＝″’Run’：’sup-rotate’，’Stop’：”，’Fault’：’sup-twinkle’″x＝“0”y＝“0”width＝“100”height＝“100”/>

</svg>

sup-sign为自定义的子节点rect属性，是本发明需要解析的自定义标签名，其内容是一段JSON文本，包含了图元的状态和动画效果；

与图4中的旋转标签对应的文本内容为：

<svg>

<rectid＝“矩形”class＝“sup-rotate”x＝“0”y＝“0”width＝“100”height＝“100”/>

</svg>

与图4中的闪烁标签对应的文本内容为：

<svg>

<rect id＝“矩形”class＝“sup-twinkle”x＝“0”y＝“0”width＝“100”height＝“100”/>

</svg>

与图4中的正方形图元对应的文本内容为：

<svg>

<rectid＝“矩形”class＝“”x＝“0”y＝“0”width＝“100”height＝“100”/>

</svg>

图5为本发明的风机设备的静态图元在添加动态的属性标签后，转换成可以实时变化的动态图元的一种示意图。

应理解，本实施例仅用于说明本发明而不用于限制本发明的范围。此外应理解，在阅读了本发明讲授的内容之后，本领域技术人员可以对本发明作各种改动或修改，这些等价形式同样落于本申请所附权利要求书所限定的范围。

Claims (5)

1.一种矢量图元的动态实现方法，其特征是，包括基于SVG的静态图元的矢量图形，与矢量图形对应的文本内容；静态图元有M种状态，文本内容中设有若干个节点，每个节点均设有class属性，M＞2；

包括如下步骤：

(1-1)预先设定矢量图形通过CSS方式实现的M-1种动画效果，给出各个动画效果的动画效果名称；

(1-2)通过JavaScript脚本语言获取矢量图形中需要动态显示的节点A，将节点A的class属性内容修改为预先设定的CSS方式动画效果的名称，可以实现节点的动态展示；

(1-3)为节点A增加标签，用于标识节点A相对应的设备在不同的状态下，节点A会展示不同的动态；对标签的内容进行解析；

(1-4)利用解析的标签内容生成一段JavaScript的脚本，当设备的实际状态数据变化时，JavaScript脚本根据设备的实际状态数据修改节点A的class属性，从而展现不同的动画效果。

2.根据权利要求1所述的矢量图元的动态实现方法，其特征是，M为3，3种状态分别为运行、停止和故障；动画效果为2种，2种动画效果分别为旋转和闪烁，运行与旋转相对应，故障与闪烁相对应；

旋转动画的旋转动画名称为sup-rotate，闪烁动画的闪烁动画名称为sup-twinkle。

3.根据权利要求1所述的矢量图元的动态实现方法，其特征是，JavaScript脚本语言利用函数document.getElementsById()获得矢量图形中需要动态显示的节点A。

4.根据权利要求1所述的矢量图元的动态实现方法，其特征是，利用class＝’sup-rotate’或class＝’sup-twinkle’的方式修改class属性的内容。

5.根据权利要求1或2或3或4所述的矢量图元的动态实现方法，其特征是，所述标签的内容为sup-sign＝″’Run’：’sup-rotate’，’Stop’：”，’Fault’：’sup-twinkle’″，与节点A相对应的设备状态数据为工作状态Run时的动作为旋转，采用sup-rotate动画效果；与节点A相对应的设备状态数据为停止状态Stop时的动作为停止，无动画效果；与节点A相对应的设备状态数据为故障状态Fault时的动作是闪烁，采用sup-twinkle动画效果。