矢量图元的动态实现方法技术

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

Dynamic Realization of Vector Elements

The invention discloses a dynamic implementation method of vector primitives, which adds dynamic attribute labels to static SVG primitive files, including action types (rotation, flicker, filling, movement, display/hiding, text change, etc.), satisfies action conditions (such as operation, failure, closure, etc.), and then parses the labels in SVG files, and generates JavaScript logos according to content. Edit code. The invention not only retains the original scalability and interactivity of SVG, but also increases the dynamic display of graphic elements, and improves the readability, operability and expansibility of the page of industrial monitoring system.

【技术实现步骤摘要】
矢量图元的动态实现方法
本专利技术涉及监控系统页面展示
，尤其是涉及一种可支持监控系统页面缩放、各种分辨率切换、窗口自适应布局、静态图元动画效果展现的矢量图元的动态实现方法。
技术介绍
传统的工业监控系统页面，分辨率往往是固定大小，绘制的图形不具备窗口自动布局的功能，通常用的不是矢量图，缩放效果不理想，放大后通常会失真。如果投到大屏上既无法满足显示要求，也不美观，有时还会因为分辨率问题导致图形的显示异常和变形等。另外，自主研发的组态软件往往技术选型老旧，维护成本较高，展现方式单一，无法跨平台使用(一般只支持windows系统)，无法跨终端使用(一般只支持电脑端，不支持平板和移动终端)。目前常见的基于SVG的系统中，一般只使用静态图形或简单动画的展示，没有动态元素的加入，不能使图形根据实际的情况实时变化显示，监控系统页面的可读性和可操作性较差。
技术实现思路
本专利技术的专利技术目的是为了克服现有技术中的工业监控系统页面不能根据实际的情况实时变化显示的不足，提供了一种可支持监控系统页面缩放、各种分辨率切换、窗口自适应布局、静态图元动画效果展现的矢量图元的动态实现方法。为了实现上述目的本文档来自技高网...

【技术保护点】
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)利用...

【技术特征摘要】
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种动画效果分别为旋转和闪烁，运行与旋转相对应，...

【专利技术属性】
技术研发人员：何红宇，张伟，曹辉，何琦枫，杨振伟，
申请(专利权)人：浙江浙大中控信息技术有限公司，
类型：发明
国别省市：浙江,33