CN103176659A - 一种基于移动web的触摸响应加速方法 - Google Patents

Abstract

本发明提供一种基于移动web的触摸响应加速方法，将web页面的页面元素与事件处理机相关联，浏览器将触摸的事件对象传递给事件处理机；事件处理机通过浏览器传递的事件对象获取相关信息，并以此做出逻辑处理；事件寄存单元寄存当前事件的事件对象；状态寄存单元通过状态值来控制逻辑计算单元是否启用；逻辑计算单元从事件寄存单元存储的事件对象获取相关信息来进行逻辑计算和处理。相对于现有技术，本发明每过一个时间间隔就对浏览器的触摸事件进行一次检测，根据前一个事件对象的触点位置和当前事件对象的触点位置来监测位置的变化，以此来判断是否重绘web页面，降低了用户图形拖动时的顿挫感，减少了触摸的响应时间。

Description

一种基于移动web的触摸响应加速方法

技术领域

本发明涉及移动终端Web领域，特别涉及在移动Web中触摸响应加速的方法。

背景技术

当前，为了操作上的方便，人们用触摸屏来代替鼠标或键盘工作时，必须首先用手指或其它物体触摸安装在显示器前端的触摸屏，然后系统根据手指触摸的点来检测定位，信息输入触摸屏通常是由触摸检测部件和触摸屏控制器组成；触摸检测部件安装在显示器屏幕前面，用于检测用户触摸位置，接受后送触摸屏控制器；而触摸屏控制器的主要作用是从触摸点检测装置上接收触摸信息，并将它转换成触点坐标，再送给CPU，它同时能接收CPU发来的命令并加以执行。

Web应用程序是一种可以通过Web访问的应用程序。Web应用程序的一个最大好处是用户只需要有浏览器即可，不需要再安装其他软件。这是一种基于B/S(Browser/Server)架构的程序，能够很好地应用在局域网和广域网上，而随着当前浏览器性能的不断提升，web应用程序的使用也日益增加。互联网、移动互联网和云计算的不断发展，也在促使web应用程序的使用范围变得越来越广。

随着触摸屏和web应用程序的发展，两种技术也在不断融合，基于触摸屏的web应用程序开发的重要程度就日益增加。特别是在移动操作领域，当前已经出现了以IOS、Android、WindowsPhone领军，大量其他移动操作系统并存的局面，而这种现象已经给移动程序设计带来了诸多困扰，包括同一套系统在多个操作系统上重复开发、程序设计者需要同时掌握诸多移动操作系统的程序设计方法、程序修改调试困难、程序维护困难以及程序的诸多版本的升级问题等。为了解决这一问题，以及有很多程序设计者开始转向基于HTML5的移动web程序设计，这样做既可以避免程序在多种移动操作系统上的重复开发，也可以解决程序的维护和升级困难问题。因此，对移动web程序设计的触控开发的地位和重要性就逐渐的凸显出来。

要开发支持触摸屏设备的Web应用，需要借助浏览器的触摸事件来实现，但是直接使用浏览器的触摸事件进行触摸控制的程序设计不仅工作量大、容易出错，且每一个web应用程序都会完成近似于重复的工作，这无疑大大的降低了web应用程序的编写效率。基于上述原因，对于移动web应用进行触摸控制程序设计时通常会采用web触控引擎，即触控类库。然而，当前主流的web触控引擎均采用了事件驱动模式，当有触摸事件到达后触控引擎调用回调函数，而回调函数体由程序设计者完成，以此来实现触摸控制的处理，这种机制类似于当前大多PC操作系统内部的事件处理。这种事件驱动机制非常适用于PC上使用的web应用程序，具有响应速度快、接口程序设计简洁、编程效率高等特点。但是，对于开发移动终端上的web应用程序，这种机制则显得不够实用：由于通常移动终端的硬件处理能力远远弱于桌面PC，这种事件驱动模式反而会制约移动web程序的设计，使得开发出的移动web程序对于用户触摸操作的响应效率降低，特别是对块元素拖动和手势识别时，程序运行的顿挫感明显加大，使得整个应用程序的用户体验变差。

发明内容

针对现有技术存在的问题，本发明的主要目的在于提供一种提高移动web程序对于用户触摸操作的响应效率的触摸响应加速方法。

为实现上述目的，本发明提供一种基于移动web的触摸响应加速方法的实施例，浏览器将触摸的事件对象传递给事件处理机，该事件对象包含事件类型和触点位置，事件处理机针对不同的事件类型处理方法如下：

当事件类型为触摸开始事件，事件处理机将状态寄存单元的状态值设置为true，将事件对象寄存在事件寄存单元中，进入逻辑计算单元的处理流程；

当事件类型为触摸移动事件，将当前事件的事件对象寄存在事件寄存单元中；

当事件类型为触摸结束事件，将状态寄存单元的状态值设为false；

该逻辑计算单元的处理流程如下：

判断状态寄存单元的状态值；

当状态寄存单元的状态值为true时，查看事件寄存单元中的事件对象是否为触摸开始事件；

当事件寄存单元中的事件对象不是触摸开始事件时，根据事件对象中的触点位置计算触点的位移量；

判断触点的位移量是否为0；

当触点的位移量不为0，重绘web页面；

通知浏览器回到步骤判断状态寄存单元的状态值。

进一步地，该触点位置为触点相对web页面的位置，该逻辑计算单元的处理流程中，当触点的位移量为0时，通知浏览器回到步骤判断状态寄存单元的状态值；当事件寄存单元中的事件对象是触摸开始事件时，通知浏览器回到步骤判断状态寄存单元的状态值；当状态寄存单元的状态值为flase时，退出逻辑计算单元的处理流程。

更进一步地，web页面包含多个页面元素，该页面元素与事件处理机相关联。

更进一步地，状态寄存单元的状态值默认设置为false。

更进一步地，每一web页面均设对应的文件物件模型。

更进一步地，该状态寄存单元通过状态值来控制逻辑计算单元是否启用。

更进一步地，通过一应用程序编程接口通知浏览器回到步骤判断状态寄存单元的状态值。

相对于现有技术，首先，每过一个时间间隔就对浏览器的触摸事件进行一次检测，根据前一个事件对象的触点位置和当前事件对象的触点位置来监测位置的变化，以此来判断是否重绘web页面，降低了用户图形拖动时的顿挫感，减少了触摸的响应时间；其次，使用事件对象使得开发过程不涉及底层硬件上的访问，减少了开发复杂度，提高移动web应用程序开发者的编程效率。

附图说明

图1是web页面在移动设备上的结构示例示意图

图2是图1web页面各元素对应的文件物件模型结构示意图

图3是本发明移动web触控引擎结构示意图

图4是本发明触摸开始事件中事件处理机处理流程图

图5是本发明触摸移动事件中事件处理机处理流程图

图6是本发明触摸结束事件中事件处理机处理流程图

图7是本发明逻辑计算单元处理流程图

11显示屏

12浏览器

13web页面

14触点

31状态寄存单元

32事件寄存单元

33事件处理机

34逻辑计算单元

具体实施方式

下面结合附图，详细说明本发明的具体实施方式。

如图1所示，为web页面13在移动设备上的结构示例示意图。一般移动设备包含了显示屏11，并通过浏览器12来访问网络。在访问的web页面13中，可以包含一个或多个页面元素，例如元素101，元素102，元素103，元素104，这些元素可以是web页面13中的文本域，图片，媒体播放器等。这些元素在web页面13中各自占有一定的区域，同时这元素亦可相互嵌套，如元素101与元素104存在于web页面13中，而元素102和元素103则放置在元素101内。

如图2所示，是图1web页面13各元素对应的文件物件模型结构示意图。每个web页面13都有相应的文件物件模型(DOM，Document ObjectModel)与之相对应。DOM是一个树形结构，而节点200是整个树的根节点。web页面13对应节点200，元素101对应节点201，元素102对应节点202，元素103对应节点203，元素104对应节点204。基于这种映射，通过嵌入式脚本语言(如JavaScript)可以很方便的实现对web页面13的页面结构的进行访问，使用JavaScript脚本语言对web页面结构进行访问举例如下：

如图3所示，是本发明移动web触控引擎结构示意图，通过移动web触控引擎来实现基于移动web的触摸响应加速，可通过DOM及嵌入式脚本语言实现。本发明的移动web触控引擎包括状态寄存单元31、事件寄存单元32、事件处理机33和逻辑计算单元34。

将web页面的页面元素与事件处理机相关联，因此当用户触摸web页面13，如触点14时产生触摸事件，浏览器12即将触摸的事件对象传递给相应的事件处理机33，事件对象可以包含事件类型、触点相对浏览器窗口的位置、触点相对web页面的位置、触点相对显示屏的位置、事件触发时间、触点对象的编号、触点对象集合(对于多触点而言)、事件类型、触发事件的DOM对象、事件调用时传入的额外参数、冒泡前的当前触发事件的DOM对象、上一次事件处理函数的返回值等等。与本方案相关的事件对象为事件类型和触点相对于web页面的位置，触摸事件的事件类型包括触摸开始事件、触摸移动事件和触摸结束事件三类：触摸开始事件，是在用户手指刚触摸到web页面13时触发；触摸移动事件，是指用户触摸到web页面13后，直到手指抬离web页面13之前的整个过程中，以一个较短的时间间隔持续触发；触摸结束事件，是在用户手指抬离web页面13时触发。事件寄存单元32用来寄存当前事件对应的事件对象。

状态寄存单元31中记录了状态值true和false，其默认值设置为false，当触发触摸开始事件时，事件处理机33将状态寄存单元31的状态值设置为true，当触发触摸结束事件时，事件处理机33将状态寄存单元31的状态值设置为false，状态寄存单元31通过状态值来控制逻辑计算单元34是否启用，当状态值为true时，启用逻辑计算单元34，当状态值为false时，退出逻辑计算单元34。

逻辑计算单元34从事件寄存单元32存储的事件对象获取相关信息来进行逻辑计算和处理，如计算web页面元素将要移动的位置。从事件对象获取到的信息包括事件类型，以及触点相对于web页面的位置。

事件处理机33通过浏览器12传递的事件对象获取相关信息，并以此做出逻辑处理。

如图4-图6所示，分别为本发明触摸开始事件、触摸移动事件、触摸结束事件中事件处理机33的处理流程图。这三类触摸事件会分别传递给不同的事件处理机33，以实现对触摸的不同阶段进行逻辑处理。

触摸开始事件的事件处理机33处理流程图如图4所示，包含如下步骤S41-S44：

S41、用户通过触摸触发触摸开始事件；

S42、将状态寄存单元31的状态值设置为true；

S43、将当前事件的事件对象寄存在事件寄存单元32中；

S44、进入逻辑计算单元34的处理流程。

触摸移动事件的事件处理机33处理流程图如图5所示，包含如下步骤S51-S52：

S51、用户触发触摸移动事件；

S52、将当前事件的事件对象寄存在事件寄存单元32中。

触摸移动事件的事件处理机33处理流程图如图6所示，包含如下步骤S61-S62：

S61、用户触发触摸结束事件；

S62、将状态寄存单元31的状态值设为false。

如图7所示，是本发明逻辑计算单元34处理的流程图，包含如下步骤：

S71、判断状态寄存单元31的状态值，当状态寄存单元31的状态值为false时，退出逻辑计算单元34的处理流程，当状态寄存单元31的状态值为true时，进入步骤S72；

S72、查看事件寄存单元32中的事件对象是否为触摸开始事件，当事件寄存单元32中的事件对象是触摸开始事件时，通知浏览器12回到步骤S71判断状态寄存单元31的状态值，当事件寄存单元32中的事件对象不是触摸开始事件时，则进入步骤S73；

S73、计算触点14的位移量S，具体方法为：根据前一事件对象中触点相对web页面的位置以及当前事件对象中触点相对web页面的位置来计算触点14的位移量S；

S74、判断S的值是否为0，当触点14的位移量S为0时，通知浏览器12回到步骤S71判断状态寄存单元31的状态值，当触点14的位移量S不为0，则进入步骤S75；

S75、重绘web页面13；

S76、通知浏览器12回到步骤S71，这里通过浏览器12提供的一个应用程序编程接口(Application Programming Interface，API)，即hardwareAccelerate，通过该API通知浏览器12，浏览器12会自动在下一个适当的时候回到步骤S71。由于web页面13的动画是由许多次快速连续的重绘形成，因此这样做可以保证web页面13动画绘制平滑而不卡顿，加快触摸响应的速度。

Web页面13可以显示在浏览器12中，如果浏览器12存在于移动设备上，而且该设备的显示屏11支持触摸响应，那么用户可以使用手指触摸代替鼠标产生输入信号。本发明将web页面13中的某些页面元素与事件处理机33相关联，那么当用户触摸该元素时，就可以通过事件处理机33对相关元素进行逻辑处理。如图1所示，当用户触摸显示屏11且位于web页面13上与事件处理机33相关联的某一区域时触发触摸事件，触摸的相关信息将会传递给浏览器12，这些信息可以是触点14的位置，触摸时间等，在经过浏览器12的封装之后可以作为一个事件对象传递给事件处理机33。事件处理机33获取事件对象，利用浏览器12提供应用程序编程接口(Application Programming Interface，API)进行处理。事件对象和应用程序编程接口的使用使得开发过程不用涉及底层硬件上的访问，极大减少开发复杂度，同时也使得web网页在不同设备上具有很强的可移植性。

以上介绍了一种基于移动web的触摸响应加速方法。本发明并不限定于以上实施例，任何未脱离本发明技术方案，即仅仅对其进行本领域普通技术人员所知悉的改进或变更，均属于本发明的保护范围之内。

Claims (10)

1.一种基于移动web的触摸响应加速方法，其特征在于：浏览器将触摸的事件对象传递给事件处理机，所述事件对象包含事件类型和触点位置，所述事件处理机针对不同的事件类型处理方法如下：

当所述事件类型为触摸开始事件，事件处理机将状态寄存单元的状态值设置为true，将事件对象寄存在事件寄存单元中，进入逻辑计算单元的处理流程；

当所述事件类型为触摸移动事件，将当前事件的事件对象寄存在事件寄存单元中；

当所述事件类型为触摸结束事件，将状态寄存单元的状态值设为false；

所述逻辑计算单元的处理流程如下：

判断状态寄存单元的状态值；

当状态寄存单元的状态值为true时，查看事件寄存单元中的事件对象是否为触摸开始事件；

当事件寄存单元中的事件对象不是触摸开始事件时，根据事件对象中的触点位置计算触点的位移量；

判断触点的位移量是否为0；

当触点的位移量不为0，重绘web页面；

通知浏览器回到步骤判断状态寄存单元的状态值。

2.如权利要求1所述的基于移动web的触摸响应加速方法，其特征在于：

所述逻辑计算单元的处理流程中，当触点的位移量为0时，通知浏览器回到步骤判断状态寄存单元的状态值。

3.如权利要求2所述的基于移动web的触摸响应加速方法，其特征在于：

所述逻辑计算单元的处理流程中，当事件寄存单元中的事件对象是触摸开始事件时，通知浏览器回到步骤判断状态寄存单元的状态值。

4.如权利要求3所述的基于移动web的触摸响应加速方法，其特征在于：

所述逻辑计算单元的处理流程中，当状态寄存单元的状态值为flase时，退出逻辑计算单元的处理流程。

5.如权利要求1-4任一所述的基于移动web的触摸响应加速方法，其特征在于：所述web页面包含多个页面元素，所述页面元素与事件处理机相关联。

6.如权利要求1-4任一所述的基于移动web的触摸响应加速方法，其特征在于：所述触点位置为触点相对web页面的位置。

7.如权利要求1-4任一所述的基于移动web的触摸响应加速方法，其特征在于：所述状态寄存单元的状态值默认设置为false。

8.如权利要求1-4任一所述的基于移动web的触摸响应加速方法，其特征在于：所述每一web页面均设对应的文件物件模型。

9.如权利要求1-4任一所述的基于移动web的触摸响应加速方法，其特征在于：所述状态寄存单元通过状态值来控制逻辑计算单元是否启用。

10.如权利要求1-4任一所述的基于移动web的触摸响应加速方法，其特征在于：通过一应用程序编程接口通知浏览器回到步骤判断状态寄存单元的状态值。

Images