Gesture Recognizer

Gesture Recognizer Overview

This document describes the process by which Touch Events received by a WindowEventDispatcher are transformed into Gesture Events.

 

Touch Events

  • Press
  • Move
  • Release
  • Cancel: fired on preventDefault'ed release, or when we need to truncate a touch stream (i.e. when something else takes window capture)

Gesture Events

Gesture Events contain type specific data in their GestureEventDetails object.  See here for a summary of the typical event sequences.

 
  • Tap Down
    • Fired when the first finger is pressed.
  • Show Press
    • Fired on a delay after a tap down if no movement has occurred, or directly before a tap if the finger is released before the delay is finished.
    • Triggers the active state.
  • Tap
    • Fired after a press followed by a release, within the tap timeout window.
    • Has a "tap_count" field, indicating whether or not this is a single, double or triple tap.
  • Tap Cancel
    • Eventually fired after every Tap Down which doesn't result in a tap.
  • Double Tap
    • Only fired on Android, where it is used for double tap zooming.
  • Tap Unconfirmed
    • Only fired on Android.
    • Occurs whenever a tap would occur on Aura.
    • On Android, tap is fired after a delay, to ensure the current gesture isn't a double tap.
  • Long Press
    • Fired on a delay after a tap down, if no movement has occurred.
  • Swipe
    • Some number of fingers were pressed, and then at least one finger was released while all fingers were moving in the same direction.
    • Contains the direction the fingers were moving in.
  • Scroll Begin
    • Contains the offset from the tap down, to hint at the direct the scroll is likely to be in.
  • Scroll Update
    • Contains the scroll delta.
  • Scroll End
    • Fired when a finger is lifted during scroll, without enough velocity to cause a fling.
  • Fling Start
    • Fired when a finger is lifted during scroll, with enough velocity to cause a fling.
  • Fling Cancel
    • If we're in a fling, stop it. This is synthesized and dispatched immediately before each tap down event.
  • Pinch Begin
  • Pinch Update
    • Associated scale.
  • Pinch End
  • Two Finger Tap
    • Two fingers were pressed, then one was released, without much finger movement.
  • Begin
    • A finger was pressed. You can figure out how many fingers are down now using event.details.touch_points().
  • End
    • A finger was released. You can figure out how many fingers are down now using event.details.touch_points().

Terminology

  • Touch Lock:
    • The association between an existing touch and its target.
  • Touch Capture:
    • If a window is capturing touches, new touches will be targetted at the capturing window.
  • Touch Id:
    • The global id given to each touch. Contiguous starting from 0 for each display.
  • Rail Scroll:
    • A scroll which is locked to only move vertically or horizontally.
  • Fling:
    • When scrolling, if the user releases their fingers, but the scroll should continue, this is known as a fling.

Finding a Target

Possible ways of establishing a target

  1. If a touch is already locked to a target, keep it.
  2. If a window is capturing touches, target that window.
  3. If it's outside the root window, target the root window.
  4. If it's near another touch, use the other touch's target.
  5. Otherwise, use whichever window the touch is above.

In the following images, a filled in circle represents a touch down, and the outline of a circle represents a position the touch has moved to. The dotted green line indicates the window that a touch is targeted at. The rounded rectangle represents a window, and the outer rectangle represents the root window.

1. If a touch is already locked to a target, keep it.

2. If a window is capturing touches, target that window.

3. If it's outside the root window, target the root window.

 

4. If it's near another touch, use the other touch's target.

5. Otherwise, use whichever window the touch is above.
 

Complications

preventDefault’ed Release

When Javascript calls preventDefault on a touch release, we need to make sure that no gesture events are created, but we also need to ensure that the GestureRecognizer knows that the associated finger isn’t down any more. To accomplish this, we turn the touch release into a touch cancel event.

Touch Capture

When a touch capture occurs, all touches on windows other than the window gaining capture need to be ignored until they are released. To do this, we fire a touch cancel for each of these touches.

Generating Gesture Events

Each touch-id has an associated window (See GestureRecognizerImpl::touch_id_target_), and each window has an associated GestureProviderAura.

GestureProviderAura contains a FilteredGestureProvider, which is responsible for performing gesture detection on both Android and Aura.

Where To Start

GestureRecognizerImpl 

  • Take in touches, and fire callbacks for each gesture.

UI Framework-1: Aura Gesture Recognizer的更多相关文章

  1. Hybrid UI framework shootout: Ionic vs. Famo.us vs. F7 vs. OnsenUI

    1 Introduction In the past 2 years I’ve been working intensively on mobile applications, mostly hybr ...

  2. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  3. [转]Ionic – Mobile UI Framework for PhoneGap/Cordova Developers

    本文转自:http://devgirl.org/2014/01/20/ionic-mobile-ui-framework-for-phonegapcordova-developers/ Ionic i ...

  4. 05 - Vue3 UI Framework - Button 组件

    官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...

  5. 01 - Vue3 UI Framework - 开始

    写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...

  6. 03 - Vue3 UI Framework - 首页

    顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的 ...

  7. 07- Vue3 UI Framework - Switch 组件

    为了更好的提升用户体验,我们这里再做一个很常用的开关组件 switch 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 switch 组件应分为选中/未被选中,两种状态 可以通过 ...

  8. 08 - Vue3 UI Framework - Input 组件

    接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 ...

  9. 09 - Vue3 UI Framework - Table 组件

    接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...

随机推荐

  1. python+caffe训练自己的图片数据流程

    1. 准备自己的图片数据 选用部分的Caltech数据库作为训练和测试样本.Caltech是加州理工学院的图像数据库,包含Caltech101和Caltech256两个数据集.该数据集是由Fei-Fe ...

  2. 整数转罗马数字 C++实现 java实现 leetcode系列(十二)

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...

  3. BZOJ 4636 (动态开节点)线段树

    思路: 偷懒 懒得离散化 搞了个动态开节点的线段树 (其实是一样的--..) 注意会有a=b的情况 要判掉 //By SiriusRen #include <cstdio> #includ ...

  4. 修改host文件浏览国外网站

    公司电脑网络没法进github没办法工作需要只能FQ了. 方法1:用VPN 但是地要钱呐,没钱只能放弃了,不过每天试用还是可以的 方法2:改电脑host,文件中每条数据前面的#代表注释.把要访问的地址 ...

  5. 中文版 R-FCN: Object Detection via Region-based Fully Convolutional Networks

    R-FCN: Object Detection via Region-based Fully Convolutional Networks 摘要 我们提出了基于区域的全卷积网络,以实现准确和高效的目标 ...

  6. [转] CentOS 7 为firewalld添加开放端口及相关资料

    转自http://www.cnblogs.com/hubing/p/6058932.html 1.运行.停止.禁用firewalld 启动:# systemctl start  firewalld 查 ...

  7. swift 20 - Nested Types

    Nested Types 只是为了方便类型的整合和使用 struct BlackjackCard { // nested Suit enumeration enum Suit: Character { ...

  8. TypeError: Cannot use 'in' operator to search for 'length' in....

    前台页面读取商品属性是字符串形式,数据库中存储商品属性是集合形式,前台数据存入数据库中数据格式会自动转,后台数据回显到前台数据格式需要手动转换,否则会报异常 错误信息提示:

  9. mysql 将时间转换成时间戳

    select UNIX_TIMESTAMP(addtime/*date_column*/) from tablename 输出:1548658912 数据库原格式:2019-01-28 15:01:2 ...

  10. [细节版]Let'sEncrypt 免费通配符/泛域名SSL证书添加使用教程

    参考网址:https://lnmp.org/faq/letsencrypt-wildcard-ssl.html 使用的dns服务商:阿里云 , 更多服务商地址可见参考网址. 遇见的问题一. [Sat ...