CN103150742A

CN103150742A - 一种矢量图形动态渲染方法及其装置

Info

Publication number: CN103150742A
Application number: CN2011104013098A
Authority: CN
Inventors: 何小波; 梁俊; 钱靖
Original assignee: Shanghai Kelu Software Co Ltd
Current assignee: Shanghai Kelu Software Co Ltd
Priority date: 2011-12-06
Filing date: 2011-12-06
Publication date: 2013-06-12

Abstract

本发明公开了一种矢量图形动态渲染方法及其装置，将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定；分别定义各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则；在量测点数据变化后，根据所定义的规则，改变DOM树中该量测点绑定的图像元素的属性值；根据变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片。从而使得显示在屏幕上的矢量图形能够随着相关变量的改变而产生实时的动态变化。

Description

一种矢量图形动态渲染方法及其装置

技术领域

本发明涉及一种矢量图形动态渲染技术。

背景技术

矢量图形，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

可扩展标记语言(Extensible Markup Language，简称“XML”)，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。

许多矢量图形如可缩放矢量图形(Scalable Vector Graphics，简称“SVG”)，是基于XML的图形格式标准，因此SVG文档和XML文档具有相似的文档结构。基于这一点，可以采用XML的解析树模式来将包括SVG在内的矢量图形图片解析成文档对象模型(Document Object Model，简称“DOM”)树，图片中每个图形元素或属性对应DOM树中的一个节点。

在现有技术中，要将矢量图形绘制到屏幕，系统先将矢量图形解析成一DOM树，并根据该DOM树中各图形元素的属性值，在屏幕上将该DOM树渲染成一静态图片。

然而，该现有技术中只能在屏幕上渲染静态图片，无法满足在现有的用户界面中，经常需要进行动态渲染的需求。举例而言，在屏幕上显示的图片需要随着动态变量的改变而发生变化，并进行实时更新。

发明内容

本发明主要解决的技术问题是提供一种矢量图形动态渲染方法及其装置，使得显示在屏幕上的矢量图形能够随着相关变量的改变而产生实时的动态变化。

为了解决上述技术问题，本发明提供了一种矢量图形动态渲染方法，将矢量图形如SVG图形解析成一文档对象模型DOM树，根据该DOM树中各图形元素的属性值将该DOM树渲染成图片，该方法包含以下步骤：

将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定；分别定义各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则；在量测点数据变化后，根据所定义的规则，改变DOM树中该量测点绑定的图形元素的属性值；根据变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片。

作为进一步改进，在将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定的步骤中，还可以包含以下步骤：

物理设备上的一量测点数据与DOM树中一图形元素的多个属性值绑定。

作为进一步改进，各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则可以包含：进度条的可变长度随着量测点数据的变化而变化；和/或柱状图的高度随着量测点的数据变化而变化；和/或仪表盘的指针角度随着量测点数据的变化而变化。

本发明还提供了一种矢量图形动态渲染装置，包含：解析模块，用于将矢量图形解析成一DOM树；图片渲染模块，用于根据该DOM树中各图形元素的属性值将该DOM树渲染成图片，该装置还包含：

绑定模块，用于将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定；规则定义模块，用于分别定义各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则；属性值更改模块，用于在量测点数据变化后，根据所定义的规则，改变DOM树中该量测点绑定的图像元素的属性值；图片渲染模块还用于根据变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片。

作为进一步改进，绑定模块中进一步包含以下子模块：将物理设备上的一量测点数据与DOM树中一图形元素的多个属性值进行绑定的子模块。

作为进一步改进，规则定义模块定义的规则可以包含：进度条的可变长度随着量测点数据的变化而变化；和/或柱状图的高度随着量测点的数据变化而变化；和/或仪表盘的指针角度随着量测点数据的变化而变化。

本发明实施方式与现有技术相比，主要区别及其效果在于：将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定；分别定义各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则；在量测点数据变化后，根据所定义的规则，改变DOM树中该量测点绑定的图像元素的属性值；根据变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片。从而使得显示在屏幕上的矢量图形能够随着相关变量的改变而产生实时的动态变化。

附图说明

图1是本发明第一实施方式的矢量图形动态渲染方法流程图；

图2是本发明第二实施方式的矢量图形动态渲染装置结构图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明的实施方式作进一步地详细描述。

本发明第一实施方式涉及一种矢量图形动态渲染方法，在本实施方式中，具体的矢量图形动态渲染方法如图1所示。

在步骤101中，将矢量图形解析成一文档对象模型DOM树。

在步骤102中，将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定。

需要说明的是，物理设备上的一量测点数据可以与DOM树中一图形元素的多个属性值绑定。举例而言，物理设备北门2号电机的量测点温度的数值可以与DOM树中图形元素进度条的可变长度及颜色两个属性值进行绑定。

在步骤103中，分别定义各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则。

其中，该量测点数据所绑定的图形元素属性值的变化规则可以包含以下之一或其任意组合：进度条的可变长度随着所述量测点数据的变化而变化；和/或柱状图的高度随着所述量测点的数据变化而变化；和/或仪表盘的指针角度随着所述量测点数据的变化而变化。

例如，随着北门2号电机温度每增加1度，进度条的可变长度相应的增加1厘米；当北门2号电机的电压数值每增大1伏，柱状图的高度相应的增加0.2厘米；当北门2号电机的压强每增大1帕时，仪表盘的指针角度相应的向右转动5度。

在步骤104中，根据该DOM树中各图形元素的属性值将该DOM树渲染成图片。

在步骤105中，在量测点数据变化后，根据所定义的规则，改变DOM树中该量测点绑定的图形元素的属性值。

针对上述例子，当北门2号电机温度数值每增加1度时，则将DOM树中进度条的可变长度相应的增加1厘米；当北门2号电机的电压数值每增加1伏时，则将DOM树中柱状图的高度相应的增高0.2厘米；当北门2号电机的压强数值每增加1帕时，则将DOM树中仪表盘的指针角度相应的增加5度。

在步骤106中，根据变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片，并返回步骤105中。

由此可见，通过本实施方式使得显示在屏幕上的矢量图形能够随着相关变量的改变而产生实时的动态变化。

本发明第二实施方式涉及一种矢量图形动态渲染装置，如图2所示，该装置包含：

解析模块，用于将矢量图形解析成一DOM树。

图片渲染模块，用于根据该DOM树中各图形元素的属性值将该DOM树渲染成图片。

绑定模块，用于将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定。

规则定义模块，用于分别定义各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则。

属性值更改模块，用于在量测点数据变化后，根据所定义的规则，改变DOM树中该量测点绑定的图像元素的属性值。

图片渲染模块还用于根据变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片。

规则定义模块定义的规则可以包含：进度条的可变长度随着量测点数据的变化而变化；和/或柱状图的高度随着量测点的数据变化而变化；和/或仪表盘的指针角度随着量测点数据的变化而变化。

综上所述，将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定；分别定义各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则；在量测点数据变化后，根据所定义的规则，改变DOM树中该量测点绑定的图像元素的属性值；根据变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片。从而使得显示在屏幕上的矢量图形能够随着相关变量的改变而产生实时的动态变化。

虽然通过参照本发明的某些优选实施方式，已经对本发明进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本发明的精神和范围。

Claims

1.一种矢量图形动态渲染方法，将所述矢量图形解析成一文档对象模型DOM树，根据该DOM树中各图形元素的属性值将该DOM树渲染成图片，其特征在于，该方法还包含以下步骤：

将所述DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定；

分别定义所述各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则；

在所述量测点数据变化后，根据所定义的规则，改变所述DOM树中该量测点绑定的图形元素的属性值；

根据所述变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片。

2.根据权利要求1所述的矢量图形动态渲染方法，其特征在于，在所述将DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定的步骤中，

所述物理设备上的一量测点数据与所述DOM树中一图形元素的至少一个属性值绑定。

3.根据权利要求1所述的矢量图形动态渲染方法，其特征在于，所述各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则至少包含以下之一或其任意组合：

进度条的可变长度随着所述量测点数据的变化而变化；和/或

柱状图的高度随着所述量测点的数据变化而变化；和/或

仪表盘的指针角度随着所述量测点数据的变化而变化。

4.一种矢量图形动态渲染装置，包含：解析模块，用于将所述矢量图形解析成一DOM树；图片渲染模块，用于根据该DOM树中各图形元素的属性值将该DOM树渲染成图片，其特征在于，该装置还包含：

绑定模块，用于将所述DOM树中各图形元素的属性值与各物理设备上的量测点数据进行绑定；

规则定义模块，用于分别定义所述各量测点数据变化时，该量测点数据所绑定的图形元素属性值的变化规则；

属性值更改模块，用于在所述量测点数据变化后，根据所定义的规则，改变所述DOM树中该量测点绑定的图像元素的属性值；

所述图片渲染模块还用于根据所述变化后的DOM树中各图形元素的属性值，重新将该DOM树渲染成图片。

5.根据权利要求4所述的矢量图形动态渲染装置，其特征在于，所述绑定模块中进一步包含以下子模块：

将所述物理设备上的一量测点数据与所述DOM树中一图形元素的至少一个属性值进行绑定的子模块。

6.根据权利要求4所述的矢量图形动态渲染装置，其特征在于，所述规则定义模块定义的规则至少包含以下之一或其任意组合：

进度条的可变长度随着所述量测点数据的变化而变化；和/或

柱状图的高度随着所述量测点的数据变化而变化；和/或

仪表盘的指针角度随着所述量测点数据的变化而变化。