CN103049164B - 一种动态矢量图形快速响应操作的方法及其控制设备 - Google Patents

一种动态矢量图形快速响应操作的方法及其控制设备 Download PDF

Info

Publication number
CN103049164B
CN103049164B CN201110311024.5A CN201110311024A CN103049164B CN 103049164 B CN103049164 B CN 103049164B CN 201110311024 A CN201110311024 A CN 201110311024A CN 103049164 B CN103049164 B CN 103049164B
Authority
CN
China
Prior art keywords
event
monitor object
graphic element
mouse
performs
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201110311024.5A
Other languages
English (en)
Other versions
CN103049164A (zh
Inventor
钱靖
梁俊
何小波
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Left Bank Investment Management Co ltd
Shanghai Kelu Software Co Ltd
Original Assignee
Shanghai Kelu Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Kelu Software Co Ltd filed Critical Shanghai Kelu Software Co Ltd
Priority to CN201110311024.5A priority Critical patent/CN103049164B/zh
Publication of CN103049164A publication Critical patent/CN103049164A/zh
Application granted granted Critical
Publication of CN103049164B publication Critical patent/CN103049164B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)
  • Digital Computer Display Output (AREA)

Abstract

本发明公开了一种动态矢量图形快速响应操作的方法及其控制设备,在将SVG视图解析成DOM树的过程中,将该SVG视图中每个预定的图形元素与至少一个监听器对象绑定,监听器对象用于响应该图形元素的各类鼠标事件;当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的监听器对象被回调执行,该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作。使得在动态矢量图形对应的大批量DOM树节点中能够快速定位及读取其中被选中图形元素及其相关属性,从而大大提高了矢量图形对鼠标事件的响应速度。

Description

一种动态矢量图形快速响应操作的方法及其控制设备
技术领域
本发明涉及一种动态矢量图形响应操作的技术,尤其涉及一种动态矢量图形快速响应操作的技术。
背景技术
SVG(可缩放矢量图形)是基于XML(可扩展标记语言),用于描述二维矢量图形的一种图形格式。
DOM(文档对象模型),也被称作随机访问机制。它可以将整个SVG视图转换成一个对象模型的集合(通常称DOM树)放在内存中。SVG视图中每个图形元素或属性值对应DOM树中的一个节点。
当SVG视图中的图形元素响应鼠标事件时,需要获取该图形元素的属性值,目前获取图形元素的属性值主要有以下两种方法:
方法一:遍历与SVG视图对应DOM树的所有树节点,从中找到所选择的图形元素对应的树节点,提取该图形元素的属性值;
方法二:为特定图形元素在DOM树中的相关节点加入唯一标识符(ID号),通过该唯一标识符快速找到该图形元素对应的节点,提取该图形元素的属性值。
以上两种获取DOM树节点属性的方法都有其缺点,分别为:
方法一的缺点:当SVG视图较大或较复杂时,其对应的DOM树的树节点较多,会产生因为搜索时间过长的情况;
方法二的缺点:当SVG视图较大或较复杂时,在响应用户点击的鼠标事件时,首先需要获取被点击图形元素对应节点的ID号,但在狭小的区域里,图形元素过于集中时,辨别节点的ID号也需要花费一定的运行时间,这样大大降低了人机交互的速度。
发明内容
本发明主要解决的技术问题是提供一种动态矢量图形快速响应操作的方法及其控制设备,使得在动态矢量图形对应的大批量DOM树节点中能够快速定位及读取其中被选中图形元素及其相关属性,从而大大提高了动态矢量图形对鼠标事件的响应速度。
为了解决上述技术问题,本发明提供了一种动态矢量图形快速响应操作的方法,包含以下步骤:
在将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与一个或以上监听器对象绑定,监听器对象用于响应该图形元素的各类鼠标事件;
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的监听器对象被回调执行,该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作。
作为进一步改进,与图形元素绑定的监听器对象可以为事件执行监听器对象,每个预定的图形元素唯一对应一事件执行监听器对象,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的事件执行监听器对象被回调执行,该事件执行监听器对象根据该图形元素的属性值,直接执行与该鼠标事件相对应的操作。
作为进一步改进,上述监听器对象为事件执行监听器对象;可以预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。
在上述将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定的步骤中,根据图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型,将图形元素与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定。
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的、响应该类型鼠标事件的事件执行监听器对象被回调执行,该事件执行监听器对象提取该图形元素的属性值,根据所提取的属性值,直接执行与该鼠标事件相对应的操作。
作为进一步改进,监听器对象还可以包含事件分配监听器对象和事件执行监听器对象。
作为进一步改进,该方法还包含以下步骤:
预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作;
上述将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定的步骤中,每个预定的图像与一事件分配监听器对象绑定;
当用户点击和/或接触该图形元素形成相应的鼠标事件时,被点击和/或接触的图形元素对应的事件分配监听器对象被回调执行,该事件分配监听器对象提取该图形元素的属性值,根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象,回调执行该所确定的事件执行监听器对象,并将该图形元素的属性值传递给该事件执行监听器对象,该事件执行监听器对象根据该图形元素的属性值,直接执行与该图形元素的该鼠标事件相对应的操作。
本发明中,各类鼠标事件可以包含以下之一或其任意组合:鼠标左键点击、鼠标右键点击、鼠标移动到一图形元素范围内、和/或鼠标离开一图形元素范围等。各类操作可以包含以下之一或其任意组合:打开一新的用户界面、提取用户界面中所显示的业务逻辑设备所对应的物理设备信息、和/或控制用户界面中所显示的业务逻辑设备所对应的物理设备的操作等。
本发明还提供了一种动态矢量图形操作响应控制设备,包含:
解析模块,用于将动态矢量图形视图解析成DOM树;
绑定模块,用于在解析模块将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与一个或以上监听器对象绑定,监听器对象用于响应该图形元素的各类鼠标事件;
调用模块,用于在用户点击和/或触碰该图形元素形成相应的鼠标事件时,回调执行该被点击和/或触碰的图形元素所绑定的监听器对象,由该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作。
作为进一步改进,绑定模块为图形元素绑定的监听器对象为事件执行监听器对象,且每个预定的图形元素唯一对应一事件执行监听器对象,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;调用模块中进一步包含以下子模块:当用户点击和/或触碰该图形元素形成相应的鼠标事件时,回调执行被点击和/或触碰的图形元素所绑定的事件执行监听器对象的子模块,由该事件执行监听器对象根据该图形元素的属性值,直接执行与该鼠标事件相对应的操作。
作为进一步改进,监听器对象为事件执行监听器对象,该设备还可以包含:
存储模块,用于保存预先定义的一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。
绑定模块可以进一步包含以下子模块:
根据图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型的子模块;
将图形元素与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定的子模块。
调用模块中可以进一步包含以下子模块:
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,从被点击和/或触碰的图形元素所绑定的各事件执行监听器对象中,选择响应该类型鼠标事件的事件执行监听器对象的子模块;
回调执行该选定的事件执行监听器对象的子模块,由该事件执行监听器对象提取该图形元素的属性值,根据所提取的属性值,直接执行与该鼠标事件相对应的操作。
作为进一步改进,监听器对象包含事件分配监听器对象和事件执行监听器对象,该设备还可以包含:
存储模块,用于保存预先定义的一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。
绑定模块中可以进一步包含以下子模块:
将每个预定的图像与一事件分配监听器对象绑定的子模块。
调用模块中可以进一步包含以下子模块:
当用户点击和/或接触该图形元素形成相应的鼠标事件时,回调执行被点击和/或接触的图形元素对应的事件分配监听器对象,由该事件分配监听器对象提取该图形元素的属性值,根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象,回调执行该所确定的事件执行监听器对象,并将该图形元素的属性值传递给该事件执行监听器对象,由该事件执行监听器对象根据该图形元素的属性值,直接执行与该图形元素的该鼠标事件相对应的操作。
本发明实施方式与现有技术相比,主要区别及其效果在于:在将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定,监听器对象用于响应该图形元素的各类鼠标事件;当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的监听器对象被回调执行,该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作。使得在动态矢量图形视图所对应的大批量DOM树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,从而大大提高了矢量图形对鼠标事件的响应速度。
附图说明
下面结合附图和具体实施方式对本发明作进一步详细说明。
图1是本发明第一实施方式中一种动态矢量图形快速响应操作的方法的流程图;
图2是本发明第二实施方式中一种动态矢量图形快速响应操作的方法的流程图;
图3是本发明第三实施方式中一种动态矢量图形快速响应操作的方法的流程图;
图4是本发明第四实施方式中一种动态矢量图形操作响应控制设备的结构图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明的实施方式作进一步地详细描述。
本发明第一实施方式涉及一种动态矢量图形快速响应操作的方法,在本实施方式中,上述动态矢量图形为SVG图形,在将SVG视图解析成DOM树的过程中,将该SVG视图中每个预定的图形元素与唯一的事件执行监听器对象绑定,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的事件执行监听器对象被回调执行,该事件执行监听器对象根据该图形元素的属性值,直接执行与该鼠标事件相对应的操作。具体如图1所示。
步骤101中,将SVG视图中每一个预定的图形元素都与一个事件执行监听器对象绑定。本实施方式中的事件执行监听器对象需要响应所绑定的图形元素的各类鼠标事件,该事件执行监听器对象是分别为每个预定的图形元素所定制的,与该图形元素唯一对应。本实施方式中各类鼠标事件包含:鼠标左键点击、鼠标右键点击、鼠标移动到矢量图形范围内、和/或鼠标离开矢量图形范围等。
举例而言,对于SVG视图中预定的图形元素a,需要在鼠标移动到SVG视图中图形元素a上时,显示该图形元素a所表示的业务逻辑设备所对应的物理设备的物理信息;在左键点击该图形元素a时,对该图形元素a所表示的业务逻辑设备所对应的物理设备进行设置。比如该图形元素a所表示的业务逻辑设备是一个变电站图标,则在鼠标移动到该图形元素a上时,所需要显示的物理信息为该变电站图标所对应的实际变电站的信息。
从而在本步骤中,为该图形元素a绑定一个事件执行监听器对象1,分别响应图形元素a的鼠标左键点击的情况、和鼠标移动到图像元素a范围内的情况,执行的操作分别为在鼠标左键点击图形元素a时,对该图形元素a对应的变电站进行设置;在鼠标移动到图形元素a的范围内时,显示该图形元素a对应的变电站的物理信息。
步骤102中,事件执行监听器对图形元素上可能发生的各类鼠标事件进行监听。
步骤103中,事件执行监听器对象是否监听到鼠标事件,如果监听到,进入步骤104;否则,返回步骤102。
步骤104中,事件执行监听器直接执行鼠标事件对应的操作。本步骤中,当用户点击和/或触碰图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的事件执行监听器对象被回调执行。事件执行监听器对象根据点击和/或触碰图形元素的属性值,直接执行与鼠标事件相对应的操作。
本实施方式中,鼠标事件对应的操作包含:打开一新的用户界面、提取用户界面中所显示的业务逻辑设备所对应的物理设备信息、和/或控制用户界面中所显示的业务逻辑设备所对应的物理设备的操作等。
针对上述例子,当用户把鼠标移动到该图形元素a上时,这时与该图形元素a绑定的事件执行监听器对象1会监听到该鼠标事件,根据该图形元素a的属性值(如对应的变电站标识),直接执行显示该图形元素a对应的变电站的物理信息的操作。
通过本实施方式,使得在动态矢量图形视图所对应的大批量DOM树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,从而大大提高了矢量图形对鼠标事件的响应速度。
本发明第二实施方式涉及一种动态矢量图形快速响应操作的方法,本实施方式与第一实施方式的区别在于:第一实施方式中的事件执行监听器对象需要响应所绑定的图形元素的各类鼠标事件,是分别为每个预定的图形元素所定制的,与该图形元素唯一对应;而本实施方式中是预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。根据预定的图形元素所需要响应的鼠标事件类型和需要执行的操作类型,从预定义的一组事件执行监听器对象中选择与该图形元素的需求相匹配的事件执行监听器对象,进行绑定。
举例而言,预先定义了一组事件监听器对象:事件监听器对象1,事件监听器对象2,……,事件监听器对象n。各个事件监听器对象分别响应各类鼠标事件,比如,事件监听器对象1响应的鼠标事件类型为鼠标左键点击,执行的操作类型为打开一个新的界面,则所有鼠标左键点击后会打开一个新的界面的图形元素只需要与事件监听器对象1绑定即可。
本实施方式中各类鼠标事件包含:鼠标左键点击、鼠标右键点击、鼠标移动到矢量图形范围内、和/或鼠标离开矢量图形范围等。各类操作包含:打开一新的用户界面、提取用户界面中所显示的业务逻辑设备所对应的物理设备信息、和/或控制用户界面中所显示的业务逻辑设备所对应的物理设备的操作等。具体的流程如图2所示。
步骤201中,在将SVG视图解析成DOM树的过程中,根据图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型,将图形元素,与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定。本步骤中,与图形元素绑定事件执行监听器对象可以是一个或多个,由图形元素所需要响应的鼠标事件数量决定。针对上面的例子,如果图形元素除了与事件执行监听器对象1绑定之外,还需要响应其他的鼠标事件,那么还要将该图形元素与事件执行监听器对象2和/或事件执行监听器对象3和/或事件执行监听器对象n等绑定。
步骤202中,事件执行监听器对鼠标事件进行监听。
步骤203中,判断事件执行监听器是否监听到与其对应的鼠标事件,如果监听到,进入步骤204;否则,返回步骤202。
步骤204中,当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的、响应该类型鼠标事件的事件执行监听器对象被回调执行,该事件执行监听器对象提取该图形元素的属性值,根据所提取的属性值,直接执行与该鼠标事件相对应的操作。
针对步骤201中的例子,当用户用鼠标左键点击图形元素时,与该图形元素绑定的事件执行监听器对象1会监听到该鼠标事件,提取该图形元素的属性值,即指示需要打开哪个界面的属性值,如界面A,根据预先定义的操作类型(打开一新界面),直接打开该新的界面A。
通过本实施方式,使得在动态矢量图形视图所对应的大批量DOM树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,同时,相比第一实施方式来说,又减少了事件执行监听器对象的数量,节约了内存空间,从而进一步提高了矢量图形对鼠标事件的响应速度。
本发明第三实施方式涉及一种动态矢量图形快速响应操作的方法,本实施方式与第二实施方式的相同点是都预先定义一组事件执行监听器对象,区别在于:第二实施方式中的监听器对象只包含事件执行监听器对象,根据预定的图形元素所需要响应的鼠标事件类型和需要执行的操作类型,从预定义的一组事件执行监听器对象中选择与该图形元素的需求相匹配的事件执行监听器对象,进行绑定。而本实施方式中监听器对象包含事件分配监听器对象和事件执行监听器对象,将所有预定的图形元素与事件分配监听器对象绑定,事件分配监听器对象根据预定图形元素所需要响应的鼠标事件类型和需要执行的操作类型,调用相应的事件执行监听器对象,并把图形元素的属性信息传递给相应的事件执行监听器对象。
本实施方式中,同样需要预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。各类鼠标事件包含:鼠标左键点击、鼠标右键点击、鼠标移动到该矢量图形范围内、和/或鼠标离开矢量图形范围等。各类操作包含:打开一新的用户界面、提取用户界面中所显示的业务逻辑设备所对应的物理设备信息、和/或控制用户界面中所显示的业务逻辑设备所对应的物理设备的操作等。
举例而言,预定义的一组事件执行监听器对象为:事件执行监听器对象1,响应的鼠标事件类型为鼠标左键点击,执行的操作类型为打开一个新的界面;事件执行监听器对象2,响应的鼠标事件类型为鼠标左键点击,执行的操作类型为对用户界面中所显示的业务逻辑设备所对应的物理设备进行设置;事件执行监听器对象3,响应的鼠标事件类型为鼠标移动到本矢量图形范围内,执行的操作类型为鼠标显示的图形从箭头变为一手掌;事件执行监听器对象4,响应的鼠标事件类型为鼠标移动到本矢量图形范围内,执行的操作类型为提取用户界面中所显示的业务逻辑设备所对应的物理设备信息(如用户界面中所显示的变电站图标所对应的实际变电站的信息)。
具体的流程如图3所示。
步骤301中,将SVG视图中每个预定的图形元素与一事件分配监听器对象绑定。
步骤302中,事件分配监听器对象对预定图形元素上可能发生的鼠标事件进行监听。
步骤303中,判断事件分配监听器对象是否监听到鼠标事件,如果监听到,进入步骤304;否则,返回步骤302。
步骤304中,当用户点击和/或接触该图形元素形成相应的鼠标事件时,被点击和/或接触的图形元素对应的事件分配监听器对象被回调执行,事件分配监听器对象提取该图形元素的属性值,根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象,回调执行该所确定的事件执行监听器对象,并将该图形元素的属性值传递给该事件执行监听器对象。比如说,用户左键点击该图形元素,该图形元素绑定的事件分配监听器对象被回调执行,提取该图形元素的属性值,发现该图形元素在鼠标左击时需要打开一新的界面A,进而回调执行与该需求所匹配的事件执行监听器对象,针对上述例子,即事件执行监听器对象1,并将相应的属性值(界面A)传递给事件执行监听器对象1。
步骤305中,事件执行监听器对象根据该图形元素的属性值,直接执行与该图形元素的该鼠标事件相对应的操作。针对上述例子,事件执行监听器对象1根据所收到的属性值(界面A),打开新界面A。
通过本实施方式,使得在动态矢量图形视图所对应的大批量DOM树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,并且,通过引入事件分配监听器对象,进一步减少了需要绑定的事件执行监听器的数量,从而进一步节约了内存空间,更进一步提高了矢量图形对鼠标事件的响应速度。
本发明第四实施方式涉及一种动态矢量图形操作响应控制设备,如图4所示,包含:
解析模块,用于将动态矢量图形视图解析成DOM树;
绑定模块,用于在解析模块将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与一个或以上监听器对象绑定,监听器对象用于响应该图形元素的各类鼠标事件;
调用模块,用于在用户点击和/或触碰该图形元素形成相应的鼠标事件时,回调执行该被点击和/或触碰的图形元素所绑定的监听器对象,由该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作。
本实施方式中与预定图形元素绑定的监听器对象主要有三种情况:
第一种情况,与图形元素绑定的监听器对象为事件执行监听器对象,每个预定的图形元素唯一对应一事件执行监听器对象,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;
第二种情况,预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。与图形元素绑定的监听器对象为预定义的一个或多个事件执行监听器对象。其绑定的监听器对象的数量由该图形元素需要响应的鼠标事件数量决定;
第三种情况,监听器对象包含事件分配监听器对象和事件执行监听器对象,与图形元素绑定的监听器对象为事件分配监听器对象。
针对第一种情况,绑定模块中进一步包含:特定事件执行监听器对象绑定子模块,用于将图形元素与唯一对应的事件执行监听器对象绑定,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;
调用模块中进一步包含:特定事件执行监听器对象调用子模块,用于当用户点击和/或触碰该图形元素形成相应的鼠标事件时,回调执行被点击和/或触碰的图形元素所绑定的事件执行监听器对象,由该事件执行监听器对象根据该图形元素的属性值,直接执行与该鼠标事件相对应的操作。
本实施方式的第一种情况,使得在动态矢量图形视图所对应的大批量DOM树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,从而大大提高了矢量图形对鼠标事件的响应速度。
针对第二种情况,本实施方式中动态矢量图形操作响应控制设备还包含:
存储模块,用于保存预先定义的一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。
绑定模块可以进一步包含:
判断子模块,用于根据图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型;
类事件执行监听器绑定子模块,用于将图形元素与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定。
调用模块中可以进一步包含:
选择子模块,用于当用户点击和/或触碰该图形元素形成相应的鼠标事件时,从被点击和/或触碰的图形元素所绑定的各事件执行监听器对象中,选择响应该类型鼠标事件的事件执行监听器对象;
类事件执行监听器调用子模块,用于回调执行该选定的事件执行监听器对象,由该事件执行监听器对象提取该图形元素的属性值,根据所提取的属性值,直接执行与该鼠标事件相对应的操作。
本实施方式的第二种情况,使得在动态矢量图形视图所对应的大批量DOM树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,同时,相比第一种情况来说,又减少了事件执行监听器对象的数量,节约了内存空间,从而进一步提高了矢量图形对鼠标事件的响应速度。
针对第三种情况,本实施方式中动态矢量图形操作响应控制设备还包含:
存储模块,用于保存预先定义的一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。
绑定模块中可以进一步包含:
事件分配监听器对象绑定子模块,用于将每个预定的图像与一事件分配监听器对象绑定。
调用模块中可以进一步包含:
事件分配监听器对象调用子模块,用于当用户点击和/或接触该图形元素形成相应的鼠标事件时,回调执行被点击和/或接触的图形元素对应的事件分配监听器对象,由该事件分配监听器对象提取该图形元素的属性值,根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象,回调执行该所确定的事件执行监听器对象,并将该图形元素的属性值传递给该事件执行监听器对象,由该事件执行监听器对象根据该图形元素的属性值,直接执行与该图形元素的该鼠标事件相对应的操作。
本实施方式第三种情况,使得在动态矢量图形视图所对应的大批量DOM树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,通过引入事件分配监听器对象,进一步减少了需要绑定的事件执行监听器的数量,从而进一步节约了内存空间,更进一步提高了矢量图形对鼠标事件的响应速度。
虽然通过参照本发明的某些优选实施方式,已经对本发明进行了图示和描述,但本领域的普通技术人员应该明白,可以在形式上和细节上对其作各种改变,而不偏离本发明的精神和范围。

Claims (8)

1.一种动态矢量图形快速响应操作的方法,其特征在于,包含以下步骤:
在将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定,所述监听器对象用于响应该图形元素的各类鼠标事件;
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的监听器对象被回调执行,该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作;
所述监听器对象为事件执行监听器对象,该方法还包含以下步骤:
预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作;
所述将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定的步骤中,根据所述图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型,将所述图形元素与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定;
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的、响应该类型鼠标事件的事件执行监听器对象被回调执行,该事件执行监听器对象提取该图形元素的属性值,根据所提取的属性值,直接执行与该鼠标事件相对应的操作。
2.根据权利要求1所述的动态矢量图形快速响应操作的方法,其特征在于,所述与图形元素绑定的监听器对象为事件执行监听器对象,每个预定的图形元素唯一对应一事件执行监听器对象,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的事件执行监听器对象被回调执行,该事件执行监听器对象根据该图形元素的属性值,直接执行与该鼠标事件相对应的操作。
3.根据权利要求1所述的动态矢量图形快速响应操作的方法,其特征在于,所述监听器对象包含事件分配监听器对象和事件执行监听器对象,该方法还包含以下步骤:
预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作;
所述将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定的步骤中,所述每个预定的图形元素与一事件分配监听器对象绑定;当用户点击和/或接触该图形元素形成相应的鼠标事件时,被点击和/或接触的图形元素对应的事件分配监听器对象被回调执行,该事件分配监听器对象提取该图形元素的属性值,根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象,回调执行该所确定的事件执行监听器对象,并将该图形元素的属性值传递给该事件执行监听器对象,该事件执行监听器对象根据该图形元素的属性值,直接执行与该图形元素的该鼠标事件相对应的操作。
4.根据权利要求1至3中任意一项所述的动态矢量图形快速响应操作的方法,其特征在于,所述各类鼠标事件至少包含以下之一或其任意组合:鼠标左键点击、鼠标右键点击、鼠标移动到所述图形元素范围内、和/或鼠标离开所述图形元素范围。
5.根据权利要求1至3中任意一项所述的动态矢量图形快速响应操作的方法,其特征在于,所述与鼠标事件相对应的操作至少包含以下之一或其任意组合:
打开一新的用户界面、提取用户界面中所显示的业务逻辑设备所对应的物理设备信息、和/或控制用户界面中所显示的业务逻辑设备所对应的物理设备的操作。
6.一种动态矢量图形操作响应控制设备,其特征在于,包含:
解析模块,用于将动态矢量图形视图解析成DOM树;
绑定模块,用于在所述解析模块将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定,所述监听器对象用于响应该图形元素的各类鼠标事件;
调用模块,用于在用户点击和/或触碰该图形元素形成相应的鼠标事件时,回调执行该被点击和/或触碰的图形元素所绑定的监听器对象,由该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作;
所述监听器对象为事件执行监听器对象,该设备还包含:
存储模块,用于保存预先定义的一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作;
所述绑定模块进一步包含以下子模块:
根据所述图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型的子模块;
将所述图形元素与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定的子模块;
所述调用模块中进一步包含以下子模块:
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,从被点击和/或触碰的图形元素所绑定的各事件执行监听器对象中,选择响应该类型鼠标事件的事件执行监听器对象的子模块;
回调执行该选择的事件执行监听器对象的子模块,由该事件执行监听器对象提取该图形元素的属性值,根据所提取的属性值,直接执行与该鼠标事件相对应的操作。
7.根据权利要求6所述的动态矢量图形操作响应控制设备,其特征在于,所述绑定模块中所述与图形元素绑定的监听器对象为事件执行监听器对象,每个预定的图形元素唯一对应一事件执行监听器对象,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;
所述调用模块中进一步包含以下子模块:
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,回调执行被点击和/或触碰的图形元素所绑定的事件执行监听器对象的子模块,由该事件执行监听器对象根据该图形元素的属性值,直接执行与该鼠标事件相对应的操作。
8.根据权利要求6所述的动态矢量图形操作响应控制设备,其特征在于,所述监听器对象包含事件分配监听器对象和事件执行监听器对象,该设备还包含:
存储模块,用于保存预先定义的一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作;
所述绑定模块中进一步包含以下子模块:
将所述每个预定的图形元素与一事件分配监听器对象绑定的子模块;
所述调用模块中进一步包含以下子模块:
当用户点击和/或接触该图形元素形成相应的鼠标事件时,回调执行被点击和/或接触的图形元素对应的事件分配监听器对象,由该事件分配监听器对象提取该图形元素的属性值,根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象,回调执行该所确定的事件执行监听器对象,并将该图形元素的属性值传递给该事件执行监听器对象,由该事件执行监听器对象根据该图形元素的属性值,直接执行与该图形元素的该鼠标事件相对应的操作。
CN201110311024.5A 2011-10-14 2011-10-14 一种动态矢量图形快速响应操作的方法及其控制设备 Active CN103049164B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201110311024.5A CN103049164B (zh) 2011-10-14 2011-10-14 一种动态矢量图形快速响应操作的方法及其控制设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201110311024.5A CN103049164B (zh) 2011-10-14 2011-10-14 一种动态矢量图形快速响应操作的方法及其控制设备

Publications (2)

Publication Number Publication Date
CN103049164A CN103049164A (zh) 2013-04-17
CN103049164B true CN103049164B (zh) 2017-09-19

Family

ID=48061820

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201110311024.5A Active CN103049164B (zh) 2011-10-14 2011-10-14 一种动态矢量图形快速响应操作的方法及其控制设备

Country Status (1)

Country Link
CN (1) CN103049164B (zh)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103686397B (zh) * 2013-11-28 2017-04-19 张翼翔 一种视频显示终端的界面呈现物品属性配置设备及方法
CN104808913B (zh) * 2014-01-23 2019-08-06 腾讯科技(深圳)有限公司 事件响应方法和装置
CN104461260A (zh) * 2014-11-27 2015-03-25 武汉大学 一种实现svg自定义鼠标右键菜单的方法
CN105094846A (zh) * 2015-08-21 2015-11-25 浪潮(北京)电子信息产业有限公司 数据处理方法、系统及其事件驱动模型建立方法和系统
US10108321B2 (en) * 2015-08-31 2018-10-23 Microsoft Technology Licensing, Llc Interface for defining user directed partial graph execution
CN105302445B (zh) * 2015-11-12 2019-07-23 小米科技有限责任公司 图形用户界面绘制方法及装置
CN108399172B (zh) * 2017-02-07 2021-10-15 阿里巴巴集团控股有限公司 一种矢量图的生成方法和装置
CN107562340A (zh) * 2017-08-28 2018-01-09 北京白鹭时代信息技术有限公司 一种图形编辑类应用的辅助图形选择和编辑方法及装置
CN108874569B (zh) * 2018-05-31 2021-07-30 北京三快在线科技有限公司 事件响应及文件生成的方法、装置及电子设备
CN109729410B (zh) * 2018-12-29 2022-03-04 北京字节跳动网络技术有限公司 一种直播间交互事件处理方法、装置、设备及存储介质
CN113792238A (zh) * 2021-09-16 2021-12-14 山石网科通信技术股份有限公司 Svg图像的处理方法及装置、存储介质和处理器
CN116523738B (zh) * 2023-07-03 2024-04-05 腾讯科技(深圳)有限公司 一种任务触发方法、装置、存储介质以及电子设备

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101000544A (zh) * 2007-01-16 2007-07-18 华为技术有限公司 基于Web页面的事件分发方法与装置
CN102073452A (zh) * 2010-12-29 2011-05-25 北京锐安科技有限公司 一种实现flex自定义右键菜单的方法

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7962895B2 (en) * 2006-07-20 2011-06-14 Oracle America, Inc. Language for binding scalable vector graphics elements to java classes

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101000544A (zh) * 2007-01-16 2007-07-18 华为技术有限公司 基于Web页面的事件分发方法与装置
CN102073452A (zh) * 2010-12-29 2011-05-25 北京锐安科技有限公司 一种实现flex自定义右键菜单的方法

Also Published As

Publication number Publication date
CN103049164A (zh) 2013-04-17

Similar Documents

Publication Publication Date Title
CN103049164B (zh) 一种动态矢量图形快速响应操作的方法及其控制设备
CN104036040B (zh) 报表生成方法及装置
CN106155644B (zh) 适用于智能电视浏览器的网页焦点控制实现方法
CN105005571B (zh) 支持智能用电信息可视化展示的方法及装置
JP2020123360A (ja) 動的コード管理
KR20200043467A (ko) 웹페이지 콘텐츠를 추출하기 위한 방법 및 단말 장치
WO2012115981A1 (en) On-page manipulation and real-time replacement of content
CN102156750A (zh) 一种桌面组件的分类显示方法及移动终端
CN107786601A (zh) 一种信息处理方法、终端及服务器
CN103870508B (zh) 一种网页缩放方法、装置和系统
CN106649033A (zh) web系统健康状态检查方法及装置
CN102831150B (zh) 浏览器与本地应用的交互方法、系统及终端
CN104636394A (zh) 用户生成内容信息的展示方法、系统和装置
CN107390992A (zh) 网页操控交互方法、装置及网站服务器
CN103607644A (zh) 一种Android电视自定义屏保程序的方法
CN105868290A (zh) 一种展现搜索结果的方法及装置
CN102073670A (zh) 一种用于调试在线网页模板的方法、设备及系统
CN101895547A (zh) 一种基于不确定服务的推荐系统及方法
CN103020277B (zh) 一种搜索项建议方法和装置
CN108319474A (zh) 一种页面信息生成方法、装置和设备
CN104020923B (zh) 一种电子产品的触控终端的图标显示方法及该电子产品
CN101236558A (zh) 一种基于web页的模拟IM客户端界面的方法和装置
US20150007019A1 (en) Apparatuses and methods for phone number processing
CN103631944B (zh) 一种基于内容相似的网页分割方法
CN109240664A (zh) 一种采集用户行为信息的方法及终端

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CP02 Change in the address of a patent holder
CP02 Change in the address of a patent holder

Address after: 201203 403d, building 5, No. 3000, Longdong Avenue, Pudong New Area, Shanghai

Patentee after: Shanghai Kelu Software Co.,Ltd.

Address before: 201203 Shanghai city Pudong New Area road 887 Lane 82 Zuchongzhi Building No. two North

Patentee before: Shanghai Kelu Software Co.,Ltd.

TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20231107

Address after: 201203 north, 2nd floor, No.82, Lane 887, Zuchongzhi Road, Pudong New Area, Shanghai

Patentee after: Shanghai Kelu Software Co.,Ltd.

Patentee after: Shanghai Left Bank Investment Management Co.,Ltd.

Address before: 201203 403D 5, 3000 Longdong Avenue, Pudong New Area, Shanghai.

Patentee before: Shanghai Kelu Software Co.,Ltd.