CN109471519A - 一种手势识别方法、装置及终端 - Google Patents

一种手势识别方法、装置及终端 Download PDF

Info

Publication number
CN109471519A
CN109471519A CN201710807745.2A CN201710807745A CN109471519A CN 109471519 A CN109471519 A CN 109471519A CN 201710807745 A CN201710807745 A CN 201710807745A CN 109471519 A CN109471519 A CN 109471519A
Authority
CN
China
Prior art keywords
scroll zones
area
gesture operation
layer
simulation
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
CN201710807745.2A
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.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding 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 Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201710807745.2A priority Critical patent/CN109471519A/zh
Publication of CN109471519A publication Critical patent/CN109471519A/zh
Pending legal-status Critical Current

Links

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/017—Gesture based interaction, e.g. based on a set of recognized hand gestures
    • 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop

Landscapes

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

Abstract

一种手势识别方法、装置及终端，在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应。本申请还提供了手势识别装置和终端。本申请解决了web页面使用模拟滚动区域时存在的操作冲突。

Description

一种手势识别方法、装置及终端
技术领域
本发明涉及手势识别技术，更具体地，涉及一种混合模式移动应用中的手势识别方法、装置及终端。
背景技术
原生应用(Native App)是指由各移动平台本身提供开发语言所开发出来的部分。Native app上线需要用户去应用商店(app store)下载更新，同时新版上应用商店有较长的审核周期，所以通常app会作为一个容器，然后使用网页视图(WebView)组件加载Web页面，Web页面(即网页页面)在服务端被更新后，用户就能看到最新内容，更新快速方便。
Web页面，例如h5页面，是手机浏览器中能通过统一资源定位符(URL：UniformResoure Locator)打开的页面.如果Native App中可以使用WebView组件加载某个URL的h5页面，这样的App就被视为一个混合模式移动应用(hybrid app)，Hybrid App兼具NativeApp良好用户交互体验的优势和Web App跨平台和迭代快速的优势。常用的手机淘宝、支付宝等都是此类App。
使用hybrid app的目的是提高更新运营效率，但是也希望Web页面的部分依然能够有native视图一样的良好体验。在WebView组件加载的Web页面上直接用手指拖拽会引起页面的跟随滚动，但本身不支持“下拉刷新”、“上拉加载更多”这类操作，在h5页面上，通过应用开发功能组件可以创建一个或多个模拟滚动区域，并支持诸如“下拉刷新”、“上拉加载更多”之类的操作。例如，如果想要开发一个带“下拉刷新”功能的h5页面时，JS开发人员会使用iscroller一类的组件库或者自己开发的组件拦截触摸(touch)事件来实现。
图1示出了一个手机1的显示界面，其顶部为域名管理区域11，其它部分(即虚线框内的部分)为h5页面12，在该示例中，整个h5页面均作为一个模拟滚动区域，域名管理区域和h5页面共同构成native视图。当然，这仅仅是示例性的，在其他示例中，域名管理区域也可以隐藏起来，而h5页面上也可以只有部分区域为模拟滚动区域。
如果在该模拟滚动区域发生向右下方滑动的手势操作，可能被应用开发功能组件识别为模拟滚动区域的下拉操作，同时被WebView组件识别为native视图的右滑操作，从而触发模拟滚动区域的内容向下滚动的同时，整个native视图也会后退滚动，这是一种不期望的看起来很奇怪的效果。类似的，模拟滚动区域的下拉操作和native视图的左滑操作，模拟滚动区域的上拉操作和native视图的右滑操作、左滑操作之间也可能产生冲突。可能存在的操作冲突与手势的定义有关，并不局限于这里提到的几种情况。
触摸事件的传递使用冒泡的事件机制，事件会从最内层的元素开始发生，一直向上传播，直到根节点。在冒泡的过程中可以“拦截”并“处理事件”，也可以中断事件继续向上冒泡，即“拦截后丢弃”。例如，对于模拟滚动区域发生的手势操作，会先经过模拟滚动区域这一层级，应用开发功能组件可以进行拦截和识别，如果不拦截的话，会传递到上一层级，由native处理层的WebView组件进行识别，做出对应的原生默认响应。为了避免上述操作冲突，相关技术中的一种处理方式是：应用开发功能组件通常会在拦截和识别手势操作的事件之后加以丢弃，使得WebView组件没有接收到该手势操作的事件。但是，这种处理方式将无法触发右滑后退功能。
另一种处理方式是计算手势移动方向，如根据两次触摸移动(touch move)事件中的位置，计算手指移动方向，如果方向是水平偏向垂直45°内，则认为该手势操作的目的为右滑后退，如果方向是水平偏向垂直45度至90度内，则认为该手势操作为上下滚动。由于人手指移动时，不可能保持规则的几何图形轨迹来移动，移动过程中会难免会抖动，所以方向判断需要延迟进行，即手指移动一小段距离之后，才开始后退。同时不规则的运动轨迹，可能判定结果跟用户的预期是不一致的，准确性欠佳。
还有一种处理方式是按照native视图右滑后退原理，用应用开发功能组件实现。具体地，应用开发功能组件检测到手势操作事件后，计算向右滑动的最小移动距离，如果触发了右滑判断条件，则开始调用后退函数，进行native视图的后退。这种处理方式虽然能正确的识别手势，但是变成了先完成手势再进行后退。因为应用开发功能组件本身只能控制Web页面内的内容，无法做到右滑的同时，将整个native视图同时向右收起的效果。
发明内容
有鉴于此，本发明实施例提供了一种手势识别方法，包括：
在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
有鉴于此，本发明实施例还提供了一种手势识别装置，包括：
图层生成模块，用于在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
手势识别模块，对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
有鉴于此，本发明实施例还提供了一种移动终端，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下处理：
在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
有鉴于此，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下处理：
在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
上述实施例方案解决了web页面使用模拟滚动区域时存在的操作冲突，识别准确、无延迟感。
附图说明
图1是相关技术中一个示例性的手机显示界面的示意图；
图2是本发明实施例一手势识别方法的流程图；
图3是本发明实施例一的一个示例性的手机显示界面的示意图；
图4是本发明实施例二手势识别装置的模块图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白，下文中将结合附图对本发明的实施例进行详细说明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。
实施例一
本实施例以手机h5页面上的手势识别为例，说明hybrid app混合模式移动应用中的手势识别方法。h5是第5代HTML的简称，而h5页面通常用来指代手机中的富交互页面。需要说明的是，本申请并不局限于h5页面，只要是页面上实现有模拟滚动区域且存在操作冲突的页面均可以使用。
本实施例提供一种手势识别方法，如图2所示，包括：
步骤110，在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
本实施例中，由混合模式移动应用中的应用开发功能组件在网页视图组件加载的web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个位置固定的图层。
应用开发指基于终端操作***的对原生App的开发服务，开发原生App需要针对不同操作***来选择不同的App开发语言，如安卓App是Java开发语言、IOS APP是Objective-C语言、Windows Phone的APP开发是C##语言。使用这些App开发语言编写的代码可以实现一些原生App所不具有的功能，因而将其称为应用开发功能组件。
为了避免不同的操作冲突，DIV可以有多个，而DIV所在的区域的位置、大小和形状可以根据需要设计。本实施例中，所述第一区域包括所述模拟滚动区域中的以下至少一个区域：
位于所述模拟滚动区域左侧的条形区域；
位于所述模拟滚动区域右侧的条形区域；
位于所述模拟滚动区域顶部的条形区域；
位于所述模拟滚动区域底部的条形区域。
图3所示是本实施例一个手机1的显示界面，与图1类似，也包括顶部的管理区域11和h5页面12，h5页面整个作为模拟滚动区域。与图1不同的是，本实施例不仅通过应用开发功能组件在h5页面上创建了模拟滚动区域，还在该模拟滚动区域上叠加一个图层(DIV：division)，DIV是用来为HTML文档内大块(block-level)内容提供结构和背景的元素。本实施例中的DIV是不可见的元素，就象是放置在模拟滚动区域上的玻璃条一样，不会挡住对模拟滚动区域中内容的查看，但是可以遮挡住对模拟滚动区域的操作。
图3所示的DIV所在的区域为模拟滚动区域12左侧的条形区域121，该DIV位置可以使用以下代码表示：
position:fixed；
display:none；
left:0；top:0；bottom:0；
width:60px；
其中，‘position:fixed；’表示位置固定，即不随模拟滚动区域的滚动而滚动；‘left:0；’表示DIV矩形的左边(left)缘距离容器(父一级元素，即h5页面)左边缘的距离为0；‘Top:0’表示DIV矩形的上边缘距离容器上边缘的距离为0；‘bottom:0’表示DIV矩形的下边缘距离容器下边缘的距离为0；‘width:60px；’表示DIV矩形的宽度。
页面设计为了遵循用户习惯，通常左侧距离屏幕左侧边缘有一定的内边距(padding)，通常在这个padding范围内，不会放置可阅读或者可交互的组件，恰好可以用来放置这个不可见的DIV元素，使其不至于挡住需要交互的内容。
图3中DIV所在的区域的位置方便用于检测对native视图的右滑手势，如果要检测对native视图的左滑手势，则可以在模拟滚动区域的左侧设置一个DIV，依此类推，也可以在模拟滚动区域的顶部或底部设置DIV。
步骤120，对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域。
本实施例中，第一区域为该模拟滚动区域除所述图层之外的区域，第二区域为所述图层所在区域，此时图层所在区域设置为模拟滚动区域中的上述条形区域。但本申请不局限于此，在另一实施例中，第一区域为所述图层所在区域，而第二区域为该模拟滚动区域除所述图层之外的区域，仍然是对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，而对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应。为了符合使用习惯，此时图层所在区域设置为模拟滚动区域的中部，而该模拟滚动区域除所述图层之外的区域为上述条形区域。
本实施例中，上述步骤120通过以下方式实现：所述应用开发功能组件对所述第一区域发生的手势操作的事件进行拦截，将所述第一区域发生的手势操作识别为对所述模拟滚动区域的手势操作而进行响应，并在识别后丢弃所述事件；所述第二区域发生的手势操作的事件传递到所述网页视图组件后，所述网页视图组件将所述第二区域发生的手势操作识别为对所述web页面的原生视图的手势操作而进行响应。
常用的手势操作包括拖动、捏合、旋转、点按、长按、轻扫等。这些手势操作由一系列的事件(指touch事件)组成，包括touchStart事件、touchMove事件和touchEnd事件几类。
在模拟滚动区域发生的手势操作的事件，会先经过模拟滚动区域这一层级，在不可见DIV所在区域发生的手势操作的事件，会经过不可见div这一层级(与模拟滚动区域是同层级的)。本实施例中，应用开发功能组件对于DIV所在区域发生的手势操作的事件不进行拦截(也可以是进行拦截但不丢弃，而是继续传递)，这些事件都能向上传递到原生处理层的网页视图组件，由网页视图组件进行识别(属于hybrid app的原生功能)。而对模拟滚动区域中DIV之外的其他区域发生的手势操作的事件，则进行拦截并且在识别后丢弃，这样网页视图组件就不会识别该手势操作，因而就不会存在操作冲突的问题。
例如，用户从DIV所在的区域开始进行右滑操作时，应用开发功能组件不会拦截相应的touchStart事件和touchMove事件，没有中断事件冒泡，这些事件会传递至网页视图组件进行识别，这样在手指向右移动的过程中，就能同步看到native视图跟随向右移动，而在手指抬起时，即touchEnd事件触发时，当前native视图继续滚动到最右侧直至消失，从而完成后退操作。DIV所在区域开始的一次右滑操作中，手指的滑动轨迹可能会超出DIV所在的区域，此时就单个的touch事件来说，部分touchMove事件和touchEnd事件可能发生在DIV之外的区域。但是，一次手势操作的事件是作为一个整体，本申请中，如果一次手势操作的touchStart事件发生在DIV所在的区域，则认为该手势操作是DIV所在的区域发生的手势操作，而该手势操作的所有事件均认为是DIV所在的区域发生的手势操作的事件。换言之，对一次手势操作包括的触摸事件拦截与否，以该手势操作的touchStart事件所在的区域为准。
本实施例用一个不可见的固定位置元素来响应native事件，从而解决h5模拟滚动区域的手势和native手势的冲突。
需要说明的是，App是在不断发展的，应用开发功能也可能成为原生App的功能，因此本实施例由应用开发功能组件实现的功能，在其他实施例中也可以由原生App来实现，如原生App中的网页视图组件来实现。并不局限于本实施例的实现方式。
实施例二
本实施例提供一种混合模式移动应用中的手势识别装置，如图4所示，该手势识别装置包括图层生成模块10和手势识别模块20，其中：
图层生成模块10，用于在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
手势识别模块20，对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
本实施例中，
所述图层生成模块由混合模式移动应用中的应用开发功能组件实现，所述web页面是网页视图组件加载的web页面；
所述手势识别模块包括：
第一手势识别单元，由所述应用开发功能组件实现，用于对所述第一区域发生的手势操作的事件进行拦截，将所述第一区域发生的手势操作识别为对所述模拟滚动区域的手势操作而进行响应，并在识别后丢弃所述事件；
第二手势识别单元，由所述网页视图组件实现，用于接收所述第二区域发生的手势操作的事件，将所述第二区域发生的手势操作识别为对所述web页面的原生视图的手势操作而进行响应。
本实施例中，所述第二区域为所述图层所在区域，所述图层所在区域包括所述模拟滚动区域中的以下至少一个区域：
位于所述模拟滚动区域左侧的条形区域；
位于所述模拟滚动区域右侧的条形区域；
位于所述模拟滚动区域顶部的条形区域；
位于所述模拟滚动区域底部的条形区域。
本实施例中，所述图层为不可见图层。
本实施例还提供了一种移动终端，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下处理：
在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
本实施例中，所述处理器执行所述计算机程序时可以实现实施例一方法的任何处理，这里不再赘述。
本实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下处理：
在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
本实施例中，所述计算机程序被处理器执行时可以实现实施例一方法中的任何处理，这里不再一一赘述。
本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、***、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

Claims (10)

1.一种手势识别方法，包括：
在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
2.如权利要求1所述的方法，其特征在于：
所述在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层，包括：混合模式移动应用中的应用开发功能组件在网页视图组件加载的web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
所述对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应，包括：所述应用开发功能组件对所述第一区域发生的手势操作的事件进行拦截，将所述第一区域发生的手势操作识别为对所述模拟滚动区域的手势操作而进行响应，并在识别后丢弃所述事件；所述第二区域发生的手势操作的事件传递到所述网页视图组件后，所述网页视图组件将所述第二区域发生的手势操作识别为对所述web页面的原生视图的手势操作而进行响应。
3.如权利要求1或2所述的方法，其特征在于：
所述第二区域为所述图层所在区域，所述图层所在区域包括所述模拟滚动区域中的以下至少一个区域：
位于所述模拟滚动区域左侧的条形区域；
位于所述模拟滚动区域右侧的条形区域；
位于所述模拟滚动区域顶部的条形区域；
位于所述模拟滚动区域底部的条形区域。
4.如权利要求1或2所述的方法，其特征在于：
所述图层为不可见图层。
5.一种手势识别装置，其特征在于：包括：
图层生成模块，用于在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
手势识别模块，对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
6.如权利要求5所述的手势识别装置，其特征在于：
所述图层生成模块由混合模式移动应用中的应用开发功能组件实现，所述web页面是网页视图组件加载的web页面；
所述手势识别模块包括：
第一手势识别单元，由所述应用开发功能组件实现，用于对所述第一区域发生的手势操作的事件进行拦截，将所述第一区域发生的手势操作识别为对所述模拟滚动区域的手势操作而进行响应，并在识别后丢弃所述事件；
第二手势识别单元，由所述网页视图组件实现，用于接收所述第二区域发生的手势操作的事件，将所述第二区域发生的手势操作识别为对所述web页面的原生视图的手势操作而进行响应。
7.如权利要求5或6所述的手势识别装置，其特征在于：
所述第二区域为所述图层所在区域，所述图层所在区域包括所述模拟滚动区域中的以下至少一个区域：
位于所述模拟滚动区域左侧的条形区域；
位于所述模拟滚动区域右侧的条形区域；
位于所述模拟滚动区域顶部的条形区域；
位于所述模拟滚动区域底部的条形区域。
8.如权利要求5或6所述的手势识别装置，其特征在于：
所述图层为不可见图层。
9.一种移动终端，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下处理：
在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现以下处理：
在web页面上创建至少一个模拟滚动区域，并在该模拟滚动区域上叠加一个或多个图层；
对第一区域发生的手势操作，识别为对所述模拟滚动区域的手势操作而进行响应，对第二区域发生的手势操作，识别为对所述web页面的原生视图的手势操作而进行响应；
其中，所述第一区域为该模拟滚动区域除所述图层之外的区域，所述第二区域为所述图层所在区域；或者，所述第一区域为所述图层所在区域，所述第二区域为该模拟滚动区域除所述图层之外的区域。
CN201710807745.2A 2017-09-08 2017-09-08 一种手势识别方法、装置及终端 Pending CN109471519A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710807745.2A CN109471519A (zh) 2017-09-08 2017-09-08 一种手势识别方法、装置及终端

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710807745.2A CN109471519A (zh) 2017-09-08 2017-09-08 一种手势识别方法、装置及终端

Publications (1)

Publication Number Publication Date
CN109471519A true CN109471519A (zh) 2019-03-15

Family

ID=65657922

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710807745.2A Pending CN109471519A (zh) 2017-09-08 2017-09-08 一种手势识别方法、装置及终端

Country Status (1)

Country Link
CN (1) CN109471519A (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130111397A1 (en) * 2011-10-28 2013-05-02 Nintendo Co., Ltd. Recording medium storing information processing program, information processing device, information processing system, and information processing method
CN103530044A (zh) * 2012-07-03 2014-01-22 腾讯科技（深圳）有限公司 页面手势触发方法及装置
CN103838502A (zh) * 2012-11-22 2014-06-04 腾讯科技（深圳）有限公司 一种滑动识别方法和装置
CN105426196A (zh) * 2015-12-23 2016-03-23 小米科技有限责任公司 页面动画的实现方法、装置和移动终端
CN106406712A (zh) * 2016-10-21 2017-02-15 广州酷狗计算机科技有限公司 信息显示方法及装置
CN106503041A (zh) * 2016-09-19 2017-03-15 曙光信息产业(北京)有限公司 页面布局自适应方法及***

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130111397A1 (en) * 2011-10-28 2013-05-02 Nintendo Co., Ltd. Recording medium storing information processing program, information processing device, information processing system, and information processing method
CN103530044A (zh) * 2012-07-03 2014-01-22 腾讯科技（深圳）有限公司 页面手势触发方法及装置
CN103838502A (zh) * 2012-11-22 2014-06-04 腾讯科技（深圳）有限公司 一种滑动识别方法和装置
CN105426196A (zh) * 2015-12-23 2016-03-23 小米科技有限责任公司 页面动画的实现方法、装置和移动终端
CN106503041A (zh) * 2016-09-19 2017-03-15 曙光信息产业(北京)有限公司 页面布局自适应方法及***
CN106406712A (zh) * 2016-10-21 2017-02-15 广州酷狗计算机科技有限公司 信息显示方法及装置

Similar Documents

Publication Publication Date Title
RU2660642C2 (ru) Устройство и способ отображения информации устройства пользователя
JP6133411B2 (ja) ジェスチャまたはタッチを介してユーザインターフェースを制御するための最適化スキーム
US9973565B2 (en) Temporary applications for mobile devices
CN107678664A (zh) 一种终端界面切换、手势处理的方法、装置及终端
CN107704177A (zh) 界面显示方法、装置及终端
US9317257B2 (en) Folded views in development environment
CN104102643B (zh) 一种进行页面快照的方法和装置
CN102937861B (zh) 用于显示环境的共享边缘
EP2924593A1 (en) Method and apparatus for constructing documents
CN103020110A (zh) 创建并维护所浏览的文档的图像
CN111767002B (zh) 页面展示方法、装置、设备及存储介质
CN107402962A (zh) 页面显示方法和装置
CN107562321A (zh) 应用安装方法、装置及终端
CN114115681B (zh) 页面生成方法及装置、电子设备和介质
US20150212670A1 (en) Highly Customizable New Tab Page
CN109375863A (zh) 目标功能的触发方法、装置、终端及存储介质
CN110442267A (zh) 触摸操作响应方法、装置、移动终端及存储介质
KR20180003884A (ko) 전자 장치 및 그의 정보 제공 방법
CN105760794A (zh) 一种显示隐私信息的方法、装置及终端设备
CN107491297A (zh) 下拉刷新app界面的实现方法及装置
KR102471739B1 (ko) 전자 장치의 히스토리 정보 관리 장치 및 방법
CN105630366A (zh) 用于在屏幕显示设备上展示客体信息的方法及装置
CN105468227B (zh) 一种网页中信息展示方法和装置
CN113435926A (zh) 广告展示方法及装置、存储介质及电子装置
CN105760064A (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20190315

RJ01 Rejection of invention patent application after publication