[发明专利]一种动态矢量图形快速响应操作的方法及其控制设备

说明书

技术领域

本发明涉及一种动态矢量图形响应操作的技术，尤其涉及一种动态矢量图形快速响应操作的技术。

背景技术

SVG（可缩放矢量图形）是基于XML（可扩展标记语言），用于描述二维矢量图形的一种图形格式。

DOM（文档对象模型），也被称作随机访问机制。它可以将整个SVG视图转换成一个对象模型的集合（通常称DOM树）放在内存中。SVG视图中每个图形元素或属性值对应DOM树中的一个节点。

当SVG视图中的图形元素响应鼠标事件时，需要获取该图形元素的属性值，目前获取图形元素的属性值主要有以下两种方法：

方法一：遍历与SVG视图对应DOM树的所有树节点，从中找到所选择的图形元素对应的树节点，提取该图形元素的属性值；

方法二：为特定图形元素在DOM树中的相关节点加入唯一标识符（ID号），通过该唯一标识符快速找到该图形元素对应的节点，提取该图形元素的属性值。

以上两种获取DOM树节点属性的方法都有其缺点，分别为：

方法一的缺点：当SVG视图较大或较复杂时，其对应的DOM树的树节点较多，会产生因为搜索时间过长的情况；

方法二的缺点：当SVG视图较大或较复杂时，在响应用户点击的鼠标事件时，首先需要获取被点击图形元素对应节点的ID号，但在狭小的区域里，图形元素过于集中时，辨别节点的ID号也需要花费一定的运行时间，这样大大降低了人机交互的速度。

发明内容

本发明主要解决的技术问题是提供一种动态矢量图形快速响应操作的方法及其控制设备，使得在动态矢量图形对应的大批量DOM树节点中能够快速定位及读取其中被选中图形元素及其相关属性，从而大大提高了动态矢量图形对鼠标事件的响应速度。

为了解决上述技术问题，本发明提供了一种动态矢量图形快速响应操作的方法，包含以下步骤：

在将动态矢量图形视图解析成DOM树的过程中，将该动态矢量图形视图中每个预定的图形元素与一个或以上监听器对象绑定，监听器对象用于响应该图形元素的各类鼠标事件；

当用户点击和/或触碰该图形元素形成相应的鼠标事件时，被点击和/或触碰的图形元素所绑定的监听器对象被回调执行，该监听器对象根据该图形元素的属性值，直接或间接执行与该鼠标事件相对应的操作。

作为进一步改进，与图形元素绑定的监听器对象可以为事件执行监听器对象，每个预定的图形元素唯一对应一事件执行监听器对象，该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件；当用户点击和/或触碰该图形元素形成相应的鼠标事件时，被点击和/或触碰的图形元素所绑定的事件执行监听器对象被回调执行，该事件执行监听器对象根据该图形元素的属性值，直接执行与该鼠标事件相对应的操作。

作为进一步改进，上述监听器对象为事件执行监听器对象；可以预先定义一组事件执行监听器对象，每个事件执行监听器对象响应一类鼠标事件，执行同一类操作。

在上述将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定的步骤中，根据图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型，将图形元素与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定。

当用户点击和/或触碰该图形元素形成相应的鼠标事件时，被点击和/或触碰的图形元素所绑定的、响应该类型鼠标事件的事件执行监听器对象被回调执行，该事件执行监听器对象提取该图形元素的属性值，根据所提取的属性值，直接执行与该鼠标事件相对应的操作。

作为进一步改进，监听器对象还可以包含事件分配监听器对象和事件执行监听器对象。

作为进一步改进，该方法还包含以下步骤：

预先定义一组事件执行监听器对象，每个事件执行监听器对象响应一类鼠标事件，执行同一类操作；

上述将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定的步骤中，每个预定的图像与一事件分配监听器对象绑定；

当用户点击和/或接触该图形元素形成相应的鼠标事件时，被点击和/或接触的图形元素对应的事件分配监听器对象被回调执行，该事件分配监听器对象提取该图形元素的属性值，根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象，回调执行该所确定的事件执行监听器对象，并将该图形元素的属性值传递给该事件执行监听器对象，该事件执行监听器对象根据该图形元素的属性值，直接执行与该图形元素的该鼠标事件相对应的操作。