CN112416236A - 基于web页面的手势封装、交互方法、设备和存储介质 - Google Patents

基于web页面的手势封装、交互方法、设备和存储介质 Download PDF

Info

Publication number
CN112416236A
CN112416236A CN202010208601.7A CN202010208601A CN112416236A CN 112416236 A CN112416236 A CN 112416236A CN 202010208601 A CN202010208601 A CN 202010208601A CN 112416236 A CN112416236 A CN 112416236A
Authority
CN
China
Prior art keywords
touch
event
gesture
web page
operation data
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.)
Pending
Application number
CN202010208601.7A
Other languages
English (en)
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 Hode Information Technology Co Ltd
Original Assignee
Shanghai Hode Information Technology 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 Hode Information Technology Co Ltd filed Critical Shanghai Hode Information Technology Co Ltd
Priority to CN202010208601.7A priority Critical patent/CN112416236A/zh
Publication of CN112416236A publication Critical patent/CN112416236A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/542—Event management; Broadcasting; Multicasting; Notifications
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/543—User-generated data transfer, e.g. clipboards, dynamic data exchange [DDE], object linking and embedding [OLE]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04808—Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Multimedia (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种基于web页面的手势封装、交互方法、设备和存储介质，属于互联网技术领域。所述基于web页面的手势封装方法包括：针对web页面，监听浏览器原生的触摸事件；获取所述触摸事件的参数；利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件。本发明一实施例基于web移动端的浏览器原生的TouchEvent触摸事件，对移动端web页面的指定区域上常见的单指及多指手势识别操作进行封装，将每一种关联指定区域的手势作为独立的手势事件，提供简单的接口用于开发中使用，提升涉及手势的移动端页面的开发效率。

Description

基于web页面的手势封装、交互方法、设备和存储介质
技术领域
本发明涉及互联网技术领域，特别涉及手势识别技术领域，具体是指一种基于web页面的手势封装、交互方法、设备和存储介质。
背景技术
移动端web页面中，用户与页面的交互通常是通过手势进行的。在web标准中提供了TouchEvent作为技术开发时基础的数据输入，TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件，这类事件用于描述一个或多个触点的移动，以及触点的增加或减少，等等。然而，在具体的业务逻辑中，使用原生TouchEvent检测用户的手势需要大量相对重复的代码，代码不够简洁，造成代码逻辑比较冗余、麻烦，在涉及到手势的移动端页面开发时，会很大程度上影响开发效率。
发明内容
为了解决上述问题，本发明的一方面提供了一种基于web页面的手势封装方法，包括：针对web页面，监听浏览器原生的触摸事件；获取所述触摸事件的参数；利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件。
可选的，所述触摸事件的参数包括：触摸事件的类型、触点的个数和触点的位置坐标。
可选的，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，包括：根据所述触点的位置坐标，计算触点的移动距离；若所述触点的移动距离未超过预设距离，且在预设时间内用户仅点击一次屏幕，则封装为关联所述指定区域的单击事件；若所述触点的移动距离未超过预设距离，且在预设时间内用户点击两次屏幕，则封装为关联所述指定区域的双击事件。
可选的，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，还包括：根据所述触点的位置坐标，计算触点的移动距离和移动方向；若触点的初始位置坐标停留在所述指定区域上并向一个方向移动一段距离，则封装为关联所述指定区域的拖拽事件。
可选的，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，还包括：根据所述触点的位置坐标，计算触点的移动距离和移动角度；若触点往一个方向移动的角度在预设的角度阈值内，并且移动距离超过预设的距离阈值，则封装为关联所述指定区域的轻扫事件。
可选的，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，还包括：根据两个触点的位置坐标，计算两个触点的连接线在移动过程中旋转的角度；若所述角度超过预设数值，则封装为关联所述指定区域的旋转事件。
可选的，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，还包括：根据两个触点的位置坐标，计算初始两个触点的距离与当前两个触点的距离的比例；若所述比例不等于1，则封装为关联所述指定区域的缩放事件，且所述比例为缩放系数。
本发明的又一方面提供了一种基于web页面的交互方法，包括：针对web页面，监听浏览器原生的触摸事件；获取所述触摸事件的参数；利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件；响应所述手势事件，执行对应的交互操作。
本发明的再一方面提供了一种电子设备，包括存储器和处理器，所述存储器中存储有手势识别程序；所述处理器执行以下步骤：针对web页面，监听浏览器原生的触摸事件；获取所述触摸事件的参数；利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件。
本发明的另一方面提供了一种计算机存储介质，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任一项所述的方法。
根据上述内容，本发明的基于web页面的手势封装方法，包括：针对web页面，监听浏览器原生的触摸事件；获取所述触摸事件的参数；利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件。本发明能够基于web移动端的浏览器原生的TouchEvent触摸事件，对移动端web页面的指定区域上常见的单指及多指手势识别操作进行封装，将每一种关联指定区域的手势作为独立的手势事件，提供简单的接口用于开发中使用，从而提升涉及手势的移动端页面的开发效率。
附图说明
图1为本发明一实施形态的基于web页面的手势封装方法的流程示意图；
图2为本发明一实施形态的基于web页面的交互方法的流程示意图；
图3为本发明一实施形态的电子设备的示意框图；
图4为本发明一实施形态的移动端H5页面示意图；
图5为本发明一实施形态的移动端H5页面示意图；
图6为本发明一实施形态的移动端H5页面示意图；
图7为本发明一实施形态的移动端H5页面示意图。
具体实施方式
由于浏览器原生的触控事件应用程序接口TouchEvent API只提供一些坐标信息，每个Touch对象代表一个触点，每个触点都由其位置，大小，形状，压力大小，和目标元素描述，比如TouchList对象代表多个触点的列表。由此可知，原生的TouchEvent API并没有特别强调手势，只是描述了用户从开始触摸屏幕到离开屏幕的过程。然而本专利申请发明人发现：所谓的手势，需根据用户常见的操作行为，对特定的移动过程做一些识别，然后根据具体的行为识别成相应的手势。随着目前涉及手势的应用越来越多，在具体的业务逻辑中，若使用原生TouchEvent检测用户的手势，就需要大量相对重复的代码，代码不够简洁，代码逻辑冗余。
因此，本发明的手势封装方法对原生触摸事件的参数进行封装，实现手势行为识别的同时，可以简化代码，提升涉及手势的应用的开发效率。
为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。
请参阅图1所示，为本发明一实施形态的基于web页面的手势封装方法的流程示意图，包括以下步骤：
S1：针对web页面，监听浏览器原生的触摸事件；
S2：获取所述触摸事件的参数；
S3：利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件。
根据上述内容，本发明一实施例能够基于web移动端的浏览器原生的TouchEvent触摸事件，对移动端web页面的指定区域上常见的单指及多指手势识别操作进行封装，将每一种关联指定区域的手势作为独立的手势事件，提供简单的接口用于开发中使用，从而提升涉及手势的移动端页面的开发效率。
可选的，所述触摸事件的参数包括：触摸事件的类型、触点的个数和触点的位置坐标。所述触摸事件的参数为原生TouchEvent触摸事件所携带的信息，能够充分利用原基础信息，降低实施要求。
本发明一实施形态的基于web页面的手势封装方法，涉及到的手势事件例如有单击事件、双击事件、拖拽事件、轻扫事件、旋转事件、以及缩放事件。
由于原始触摸事件中会记录触点的位置坐标信息，那么，可以根据记录的触点的位置坐标信息计算出触点的移动距离和移动角度，若触点的移动距离未超过预设距离，且在预设时间内用户仅点击一次屏幕，则封装为关联所述指定区域的单击事件；若触点的移动距离未超过预设距离，且在预设时间内用户点击两次屏幕，则封装为关联所述指定区域的双击事件；若触点的初始位置坐标停留在所述指定区域上并向一个方向移动一段距离，则封装为关联所述指定区域的拖拽事件；若触点往一个方向移动的角度在预设的角度阈值内，并且移动距离超过预设的距离阈值，则封装为关联所述指定区域的轻扫事件。
也可以计算出两个触点的连接线在移动过程中旋转的角度；若所述角度超过预设数值，则封装为关联所述指定区域的旋转事件。
还可以计算出初始两个触点的距离与当前两个触点的距离的比例；若所述比例不等于1，则封装为关联所述指定区域的缩放事件，且所述比例为缩放系数。举例来说，当用户双指放在图片上时，若计算出所述比例为2，则对应地将图片放大为2倍；若计算出所述比例为0.5，则对应地将图片缩小为0.5倍。
另外，请参阅图2所示，为本发明一实施形态的基于web页面的交互方法的流程示意图，包括以下步骤：
S1：针对web页面，监听浏览器原生的触摸事件；
S2：获取所述触摸事件的参数；
S3：利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件；
S4：响应所述手势事件，对所述指定区域执行对应的交互操作。
根据上述内容，能够在交互过程中提高响应的速度，提升用户的使用体验。
本发明的又一实施形态提供了一种电子设备，如图3所示，该电子设备包括存储器和处理器，所述存储器中存储有手势识别程序；所述处理器执行以下步骤：针对web页面，监听浏览器原生的触摸事件；获取所述触摸事件的参数；利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件。
本发明的另一实施形态提供了一种计算机存储介质，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如本发明所提供的基于web页面的手势封装方法和/或交互方法。
为了能够更清楚地理解本发明的技术内容，特举以下实施例详细说明。
实施例1
作为本发明的一种实施形态，在用户于一个触摸周期内仅使用单一手势的场景下，可以通过浏览器原生的TouchEvent API(Application Programming Interface)获取触摸事件的参数，利用所述触摸事件的参数计算出触摸操作数据，从而将所述触摸操作数据封装成独立的手势事件，该手势事件关联web页面上的指定区域，具体说明如下文所述。本实施例涉及手势识别，首先需要指定一个具体的web页面元素作为事件监听目标,该目标元素可以关联web页面上的一个指定区域。在用户触摸屏幕(例如手机屏幕)的整个周期中监听目标元素的TouchEvent原生触摸事件，通过计算和处理这些原生触摸事件所携带的信息，比如原生触摸事件的类型，包含了touchstart，touchend，touchmove，以及touchcancel触摸事件。具体而言，当用户在触摸平面上放置了一个触点时，触发touchstart触摸事件；当一个触点被用户从触摸平面上移除，或者当触点移出触摸平面的边界时，触发touchend触摸事件；当用户在触摸平面上移动触点时，触发touchmove触摸事件；当触点被中断时，触发touchcancel触摸事件。
上述原生触摸事件所携带的信息还包括触点的个数和触点的位置坐标等等，利用这些原生触摸事件所携带的信息即触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联web页面上指定区域的手势事件。
例如就单击事件而言，一个完整的单击事件会触发touchstart和touchend触摸事件，并且在触发touchmove触摸事件时手指的移动距离不能超过预设的限制距离(如10px)。详细而言，用户单个手指触摸屏幕时产生一个触点，该触点在浏览器原生的触摸事件中会记录有位置坐标信息，利用该位置坐标信息计算出触点的移动距离，该移动距离不能超过预设距离。换而言之，单击过程中用户手指不能在屏幕上进行过长的移动，才能被认为是点击行为。而且单击事件会与双击事件互斥，即在一次单击操作后短时间内没有第二次单击操作，对于计算获得的触摸操作数据可以作为单击事件进行封装。
进一步而言，若用户在短时间内(如200毫秒内)进行了两次单击操作，则判断为双击事件。其中每次单击操作的判断方式如同上述单击事件的判断方式，对于计算获得的触摸操作数据可以作为双击事件进行封装。
再例如就拖拽事件而言，当用户的手指停留在目标元素上并移动一段距离时触发该拖拽事件。具体而言，由于touchstart触摸事件在被触发时会记录当前手指的位置信息，在后续touchmove触摸事件中，根据手指位置的变化来记录变化的具体数值，由此计算获得触点即用户手指的移动距离。其过程主要用于监听用户手指在屏幕上的位移，对于计算获得的触摸操作数据可以作为拖拽事件进行封装。
进一步的，拖拽事件还可以限制只在水平或垂直方向的拖拽过程中触发。具体而言，在touchstart触摸事件中记录手指的位置坐标，并和本次触摸过程中touchmove触摸事件记录的手指的位置坐标进行比较且计算方向，则计算出的方向为本次触摸过程中拖拽的方向。
再例如就轻扫事件而言，当用户用手指向屏幕上的某个方向滑动时触发该轻扫事件，其过程主要用于判断用户手指在屏幕上移动的方向。可选的，可提供的方向为上、下、左、右四个方向。可以自行设定方向判断的角度阈值和距离阈值，用来限制触发条件。具体而言，在touchstart触摸事件被触发时会记录当前手指的位置信息，并在touchend触摸事件被触发时再次记录手指的位置，根据两次位置计算出手指移动的距离和角度，如果触点往一个方向移动的角度在预设的角度阈值内，并且移动距离超过预设的距离阈值，则算做某个方向的轻扫事件触发成功。对于计算获得的触摸操作数据可以作为轻扫事件进行封装。
再例如就旋转事件而言，当用户使用两个手指在屏幕上滑动并形成一定角度的旋转时触发该旋转事件，其过程主要用于判断两个手指触摸点的连接线在移动过程中旋转的角度。具体而言，在touchstart触摸事件中会记录两个手指的初始位置信息，在每一个touchmove触摸事件中会记录两个手指新的位置信息，通过初始两个手指位置构成的向量与当前两个手指位置构成的向量形成的夹角计算旋转的角度。对于计算获得的触摸操作数据可以作为旋转事件进行封装。
再例如就缩放事件而言，当用户两个手指在屏幕上做出张开与收拢的动作时触发该缩放事件，其过程主要用于判断两个手指间的距离变化比例。具体而言，在touchstart触摸事件中会记录两个手指的初始位置信息，在每一个touchmove触摸事件中会记录两个手指新的位置信息，通过初始两个手指的距离与当前两个手指的距离的比例计算缩放系数。对于计算获得的触摸操作数据可以作为缩放事件进行封装。
根据上述内容，开发人员在涉及到手势事件的移动端页面开发时，不用再对相对重复的代码进行重复的检测及判断，提高了开发效率。比如，开发人员在开发视频创作功能、图片创作功能(如，荣誉周报、荣誉年报)等这些涉及手势操作的功能较多时，便可以利用本实施方式提供的手势封装方法，避免整体代码的冗余。需要注意的是，在实际使用时，开发人员可以依据需求对参数进行限定，以应对一些需要精细化处理或特殊需求的场景。
实施例2
与实施例1不同的是，在用户于一个触摸周期内组合使用多个手势的场景下，对计算出的触摸数据封装成独立的手势事件，该手势事件关联web页面上的指定区域。为了更清楚的说明本实施例的内容，请参阅图4-7所示，以移动端H5页面为例，其中图4显示为一实际应用中的交互页面，用于响应用户的操作；图5-7是从手机获取数据的角度显示手势的监听区域即区域a。针对tab及其内容，当左右横向拖拽区域a时，可以切换tab内容，例如图4中的区域a显示为tab“播放数”对应的柱状-折线图内容，当向左拖动该区域a时，将切换成显示tab“粉丝数”的对应内容；当纵向滑动时，可以使页面整体内容上下滚动。那么，当用户的手指开始在手机屏幕上移动的时候就需要首先判断该用户是想横向拖拽还是想纵向滑动，才能避免用户想纵向滚动内容，却因过程中手指不是直线移动而导致tab内容被横向拖拽的情况。
可选的，当用户开始在手机屏幕上进行移动操作时，用户手势的开始位置和用户手势的第一个有效移动位置会被记录，用于标记用户本次拖拽是水平方向上的手势还是垂直方向上的手势，若用户先进行垂直方向上的移动则是针对页面整体的滚动，那么针对tab水平方向上的拖拽手势则不被触发。在该触摸周期中，将计算出的触摸数据封装成独立的手势事件，且该手势事件关联web页面上的区域a(即上述指定区域)。根据上述内容，能够避免各手势互相冲突的问题。
再例如，页面中间有一个图表，当触发纵向移动手势时，页面整体做纵向滚动；当触发图表上的横向移动手势时，比如横向移动显示该图表的内容，此时页面整体不做纵向滚动。那么，此处需要对拖动手势做横纵方向的判断，从而在一些组合使用手势的场景下能够避免手势事件之间互相冲突。如，在实际应用时，用户需要对图表进行操作时，可能只有横向的时候才会有图表交互(比如展示对应点的数据)，纵向的时候还是希望触发页面本身的滚动。此时，如果判定是横向，不管用户在屏幕上上下下怎么移动，都只计算横向的坐标变化，其表现是：图表的位置会固定在屏幕上，不会随着手指上下移动，从而方便用户去浏览图表数据。如果判定是纵向，那就说明用户可能只是想把图表滑走，那就不会触发图表的交互。
在另一种情况下，多个手势事件是可以同时被触发的，比如针对图片，可以同时旋转和缩放。
实施例3
在实施例1和实施例2的基础上，当触发封装后的手势事件时，响应所述手势事件，执行对应的交互操作。举例而言，针对一张图片，若用户在一个触摸周期内仅仅使用了单一手势例如缩放手势，那么响应于被触发的缩放事件，所述图片的大小被缩小或放大。但是，若用户在一个触摸周期内组合使用了多个手势，以下进行详细说明。
请参阅图4-7所示，以移动端H5页面为例。用户通过移动端例如手机进入该H5页面，其中区域a为手势识别区域(指定区域)，该区域会同时监听例如拖拽与轻扫事件。当用户在以垂直方向拖拽该区域a时，手机的屏幕界面保持页面整体(即目标元素)在垂直方向滚动，然后，当用户以水平方向拖拽该区域a时，屏幕界面停止页面整体的滚动。
具体而言，当用户拖拽区域a时，用户手势的开始位置和用户手势的第一个有效移动位置会被记录，用于标记用户本次拖拽是水平方向上的手势还是垂直方向上的手势，在同时监听到其他手势时，则中止对手势事件的响应。因为在很多场景下，在用户先进行垂直方向上的移动时是针对页面整体的滚动，此时水平方向上的手势则不被触发。
当用户以水平方向轻扫区域a时，例如可以用于实现该区域a对应的标签页(即目标元素)切换的交互功能。就轻扫手势而言，对于滑动的最大角度和最小距离都是可以控制的，以此避免误触。具体而言，该过程计算用户轻扫的起始点和终止点的连线与对应水平或垂直方向的夹角，此处可以限制一个可接受的最大夹角(例如0至±45°)，用户轻扫的夹角必须小于该角度才会触发轻扫事件，而且可以限制起始点与终止点的最小距离，用户手指移动必须超过该距离才会触发轻扫事件，比如用户仅仅手指按在屏幕上稍微动一下，并没有做完整的横扫手势，此时轻扫事件不被触发。因为轻扫事件可能会对应一些切换视图的功能，需要尽量避免误操作。
在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。

Claims (10)

1.一种基于web页面的手势封装方法，其特征在于，包括：
针对web页面，监听浏览器原生的触摸事件；
获取所述触摸事件的参数；
利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件。
2.根据权利要求1所述的基于web页面的手势封装方法，其特征在于，所述触摸事件的参数包括：触摸事件的类型、触点的个数和触点的位置坐标。
3.根据权利要求2所述的基于web页面的手势封装方法，其特征在于，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，包括：
根据所述触点的位置坐标，计算触点的移动距离；
若所述触点的移动距离未超过预设距离，且在预设时间内用户仅点击一次屏幕，则封装为关联所述指定区域的单击事件；
若所述触点的移动距离未超过预设距离，且在预设时间内用户点击两次屏幕，则封装为关联所述指定区域的双击事件。
4.根据权利要求2所述的基于web页面的手势封装方法，其特征在于，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，还包括：
根据所述触点的位置坐标，计算触点的移动距离和移动方向；
若触点的初始位置坐标停留在所述指定区域上并向一个方向移动一段距离，则封装为关联所述指定区域的拖拽事件。
5.根据权利要求2所述的基于web页面的手势封装方法，其特征在于，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，还包括：
根据所述触点的位置坐标，计算触点的移动距离和移动角度；
若触点往一个方向移动的角度在预设的角度阈值内，并且移动距离超过预设的距离阈值，则封装为关联所述指定区域的轻扫事件。
6.根据权利要求2所述的基于web页面的手势封装方法，其特征在于，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，还包括：
根据两个触点的位置坐标，计算两个触点的连接线在移动过程中旋转的角度；
若所述角度超过预设数值，则封装为关联所述指定区域的旋转事件。
7.根据权利要求2所述的基于web页面的手势封装方法，其特征在于，所述的利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件，还包括：
根据两个触点的位置坐标，计算初始两个触点的距离与当前两个触点的距离的比例；
若所述比例不等于1，则封装为关联所述指定区域的缩放事件，且所述比例为缩放系数。
8.一种基于web页面的交互方法，其特征在于，包括：
针对web页面，监听浏览器原生的触摸事件；
获取所述触摸事件的参数；
利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件；
响应所述手势事件，执行对应的交互操作。
9.一种电子设备，其特征在于，包括存储器和处理器，
所述存储器中存储有手势识别程序；
所述处理器执行以下步骤：
针对web页面，监听浏览器原生的触摸事件；
获取所述触摸事件的参数；
利用所述触摸事件的参数计算出触摸操作数据，并将所述触摸操作数据封装成关联所述web页面上指定区域的手势事件。
10.一种计算机存储介质，其特征在于，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述的方法。
CN202010208601.7A 2020-03-23 2020-03-23 基于web页面的手势封装、交互方法、设备和存储介质 Pending CN112416236A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010208601.7A CN112416236A (zh) 2020-03-23 2020-03-23 基于web页面的手势封装、交互方法、设备和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010208601.7A CN112416236A (zh) 2020-03-23 2020-03-23 基于web页面的手势封装、交互方法、设备和存储介质

Publications (1)

Publication Number Publication Date
CN112416236A true CN112416236A (zh) 2021-02-26

Family

ID=74844053

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010208601.7A Pending CN112416236A (zh) 2020-03-23 2020-03-23 基于web页面的手势封装、交互方法、设备和存储介质

Country Status (1)

Country Link
CN (1) CN112416236A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113760170A (zh) * 2021-11-09 2021-12-07 深圳市活力天汇科技股份有限公司 App页面快速跳转方法、装置、设备及介质
CN113986109A (zh) * 2021-10-27 2022-01-28 宁波华鼐时空网络科技有限公司 一种对地图进行手势识别的方法和装置
CN114594899A (zh) * 2021-12-31 2022-06-07 北京石头创新科技有限公司 地图显示的调整方法及装置
CN115079923A (zh) * 2022-06-17 2022-09-20 北京新唐思创教育科技有限公司 事件处理方法、装置、设备及介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101730878A (zh) * 2008-03-04 2010-06-09 苹果公司 用于web页面的触摸事件模型
CN101980153A (zh) * 2010-10-22 2011-02-23 中兴通讯股份有限公司 一种识别硬件手势的方法及移动终端
CN104216646A (zh) * 2013-05-30 2014-12-17 华为软件技术有限公司 基于手势创建应用程序的方法及装置
CN104731439A (zh) * 2013-12-19 2015-06-24 青岛海信移动通信技术股份有限公司 一种手势封装和任务执行方法、装置
CN104937525A (zh) * 2012-11-28 2015-09-23 思摩视听公司 使用滑动手势识别技术的内容操作
CN105786291A (zh) * 2014-12-15 2016-07-20 广州市动景计算机科技有限公司 浏览器的控制方法、装置及系统
CN106293434A (zh) * 2015-05-28 2017-01-04 惠州市德赛西威汽车电子股份有限公司 车载触摸屏终端的多点手势识别方法及装置

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101730878A (zh) * 2008-03-04 2010-06-09 苹果公司 用于web页面的触摸事件模型
CN101980153A (zh) * 2010-10-22 2011-02-23 中兴通讯股份有限公司 一种识别硬件手势的方法及移动终端
CN104937525A (zh) * 2012-11-28 2015-09-23 思摩视听公司 使用滑动手势识别技术的内容操作
CN104216646A (zh) * 2013-05-30 2014-12-17 华为软件技术有限公司 基于手势创建应用程序的方法及装置
CN104731439A (zh) * 2013-12-19 2015-06-24 青岛海信移动通信技术股份有限公司 一种手势封装和任务执行方法、装置
CN105786291A (zh) * 2014-12-15 2016-07-20 广州市动景计算机科技有限公司 浏览器的控制方法、装置及系统
CN106293434A (zh) * 2015-05-28 2017-01-04 惠州市德赛西威汽车电子股份有限公司 车载触摸屏终端的多点手势识别方法及装置

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
WINDYFANCY: "通过html5 touch 事件封装手势识别组件", 《HTTPS://WWW.CNBLOGS.COM/WINDYFANCY/P/5173836.HTML》 *
殷继彬等: "《笔+触控交互界面的设计策略与研究》", 30 June 2016, 云南大学出版社 *
肥仔仔仔: "简单封装的web里面的tab点击和swipe滑动的小插件", 《HTTPS://BLOG.CSDN.NET/WEIXIN_41757599/ARTICLE/DETAILS/82192254》 *

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113986109A (zh) * 2021-10-27 2022-01-28 宁波华鼐时空网络科技有限公司 一种对地图进行手势识别的方法和装置
CN113986109B (zh) * 2021-10-27 2024-07-23 宁波华鼐时空网络科技有限公司 一种对地图进行手势识别的方法和装置
CN113760170A (zh) * 2021-11-09 2021-12-07 深圳市活力天汇科技股份有限公司 App页面快速跳转方法、装置、设备及介质
CN114594899A (zh) * 2021-12-31 2022-06-07 北京石头创新科技有限公司 地图显示的调整方法及装置
CN115079923A (zh) * 2022-06-17 2022-09-20 北京新唐思创教育科技有限公司 事件处理方法、装置、设备及介质
CN115079923B (zh) * 2022-06-17 2023-11-07 北京新唐思创教育科技有限公司 事件处理方法、装置、设备及介质

Similar Documents

Publication Publication Date Title
CN112416236A (zh) 基于web页面的手势封装、交互方法、设备和存储介质
US8930852B2 (en) Touch screen folder control
EP2641149B1 (en) Gesture recognition
CN108064368A (zh) 柔性显示设备的控制方法及装置
CN106415472B (zh) 一种手势控制方法、装置、终端设备和存储介质
JP5449630B1 (ja) プログラマブル表示器およびその画面操作処理プログラム
US20170031511A1 (en) Touch Detection at Bezel Edge
KR20140112296A (ko) 다중 터치에 대응하는 기능을 처리하기 위한 방법 및 그 전자 장치
CN104679485A (zh) 页面元素的控制方法及装置
US11966576B2 (en) Screen icon operating method and apparatus
US20230015678A1 (en) Method for turning on single-hand operation mode, terminal and non-transitory computer-readable storage medium
CN105739879A (zh) 一种虚拟现实的应用方法及终端
CN105045481A (zh) 一种操作方法及终端
US20140368444A1 (en) Disambiguation of indirect input
EP2756377B1 (en) Virtual viewport and fixed positioning with optical zoom
CN110417984B (zh) 一种在屏幕异形区域实现操作的方法、装置及存储介质
CN110174946A (zh) 鼠标操作模拟方法、模拟系统、存储介质、及电子设备
CN104978135A (zh) 一种图标显示方法、装置及移动终端
US9720566B1 (en) Management of user interface elements
CN113311981A (zh) 擦除方法、装置、智能终端及计算机可读存储介质
CN104317492A (zh) 一种壁纸设置方法
CN107562260B (zh) 一种触摸控制的方法及装置
CN112667931B (zh) 网页收藏方法、电子设备和存储介质
CN106598381A (zh) 一种视差动画实现的方法及可实现视差动画的终端
WO2020253058A1 (zh) 图片悬浮显示方法、装置、终端和存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination