发明内容
本发明主要解决的技术问题是提供一种动态矢量图形快速响应操作的方法及其控制设备,使得在动态矢量图形对应的大批量DOM树节点中能够快速定位及读取其中被选中图形元素及其相关属性,从而大大提高了动态矢量图形对鼠标事件的响应速度。
为了解决上述技术问题,本发明提供了一种动态矢量图形快速响应操作的方法,包含以下步骤:
在将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与一个或以上监听器对象绑定,监听器对象用于响应该图形元素的各类鼠标事件;
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的监听器对象被回调执行,该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作。
作为进一步改进,与图形元素绑定的监听器对象可以为事件执行监听器对象,每个预定的图形元素唯一对应一事件执行监听器对象,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的事件执行监听器对象被回调执行,该事件执行监听器对象根据该图形元素的属性值,直接执行与该鼠标事件相对应的操作。
作为进一步改进,上述监听器对象为事件执行监听器对象;可以预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。
在上述将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定的步骤中,根据图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型,将图形元素与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定。
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的、响应该类型鼠标事件的事件执行监听器对象被回调执行,该事件执行监听器对象提取该图形元素的属性值,根据所提取的属性值,直接执行与该鼠标事件相对应的操作。
作为进一步改进,监听器对象还可以包含事件分配监听器对象和事件执行监听器对象。
作为进一步改进,该方法还包含以下步骤:
预先定义一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作;
上述将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定的步骤中,每个预定的图像与一事件分配监听器对象绑定;
当用户点击和/或接触该图形元素形成相应的鼠标事件时,被点击和/或接触的图形元素对应的事件分配监听器对象被回调执行,该事件分配监听器对象提取该图形元素的属性值,根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象,回调执行该所确定的事件执行监听器对象,并将该图形元素的属性值传递给该事件执行监听器对象,该事件执行监听器对象根据该图形元素的属性值,直接执行与该图形元素的该鼠标事件相对应的操作。
本发明中,各类鼠标事件可以包含以下之一或其任意组合:鼠标左键点击、鼠标右键点击、鼠标移动到一图形元素范围内、和/或鼠标离开一图形元素范围等。各类操作可以包含以下之一或其任意组合:打开一新的用户界面、提取用户界面中所显示的业务逻辑设备所对应的物理设备信息、和/或控制用户界面中所显示的业务逻辑设备所对应的物理设备的操作等。
本发明还提供了一种动态矢量图形操作响应控制设备,包含:
解析模块,用于将动态矢量图形视图解析成DOM树;
绑定模块,用于在解析模块将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与一个或以上监听器对象绑定,监听器对象用于响应该图形元素的各类鼠标事件;
调用模块,用于在用户点击和/或触碰该图形元素形成相应的鼠标事件时,回调执行该被点击和/或触碰的图形元素所绑定的监听器对象,由该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作。
作为进一步改进,绑定模块为图形元素绑定的监听器对象为事件执行监听器对象,且每个预定的图形元素唯一对应一事件执行监听器对象,该事件执行监听器对象用于响应所绑定的图形元素的各类鼠标事件;调用模块中进一步包含以下子模块:当用户点击和/或触碰该图形元素形成相应的鼠标事件时,回调执行被点击和/或触碰的图形元素所绑定的事件执行监听器对象的子模块,由该事件执行监听器对象根据该图形元素的属性值,直接执行与该鼠标事件相对应的操作。
作为进一步改进,监听器对象为事件执行监听器对象,该设备还可以包含:
存储模块,用于保存预先定义的一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。
绑定模块可以进一步包含以下子模块:
根据图形元素的属性值确定该图形元素需要响应的鼠标事件类型和需要执行的操作类型的子模块;
将图形元素与响应该类鼠标事件、执行该类操作的事件执行监听器对象绑定的子模块。
调用模块中可以进一步包含以下子模块:
当用户点击和/或触碰该图形元素形成相应的鼠标事件时,从被点击和/或触碰的图形元素所绑定的各事件执行监听器对象中,选择响应该类型鼠标事件的事件执行监听器对象的子模块;
回调执行该选定的事件执行监听器对象的子模块,由该事件执行监听器对象提取该图形元素的属性值,根据所提取的属性值,直接执行与该鼠标事件相对应的操作。
作为进一步改进,监听器对象包含事件分配监听器对象和事件执行监听器对象,该设备还可以包含:
存储模块,用于保存预先定义的一组事件执行监听器对象,每个事件执行监听器对象响应一类鼠标事件,执行同一类操作。
绑定模块中可以进一步包含以下子模块:
将每个预定的图像与一事件分配监听器对象绑定的子模块。
调用模块中可以进一步包含以下子模块:
当用户点击和/或接触该图形元素形成相应的鼠标事件时,回调执行被点击和/或接触的图形元素对应的事件分配监听器对象,由该事件分配监听器对象提取该图形元素的属性值,根据所提取的属性值确定该鼠标事件对应的操作类型、和执行该类操作的事件执行监听器对象,回调执行该所确定的事件执行监听器对象,并将该图形元素的属性值传递给该事件执行监听器对象,由该事件执行监听器对象根据该图形元素的属性值,直接执行与该图形元素的该鼠标事件相对应的操作。
本发明实施方式与现有技术相比,主要区别及其效果在于:在将动态矢量图形视图解析成DOM树的过程中,将该动态矢量图形视图中每个预定的图形元素与至少一个监听器对象绑定,监听器对象用于响应该图形元素的各类鼠标事件;当用户点击和/或触碰该图形元素形成相应的鼠标事件时,被点击和/或触碰的图形元素所绑定的监听器对象被回调执行,该监听器对象根据该图形元素的属性值,直接或间接执行与该鼠标事件相对应的操作。使得在动态矢量图形视图所对应的大批量DOM树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,从而大大提高了矢量图形对鼠标事件的响应速度。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明的实施方式作进一步地详细描述。
本发明第一实施方式涉及一种动态矢量图形快速响应操作的方法,在本实施方式中,上述动态矢量图形为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树节点中能够快速定位及读取某一被选中的图形元素及其相关属性,通过引入事件分配监听器对象,进一步减少了需要绑定的事件执行监听器的数量,从而进一步节约了内存空间,更进一步提高了矢量图形对鼠标事件的响应速度。
虽然通过参照本发明的某些优选实施方式,已经对本发明进行了图示和描述,但本领域的普通技术人员应该明白,可以在形式上和细节上对其作各种改变,而不偏离本发明的精神和范围。