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. bzoj4590: [Shoi2015]自动刷题机(二分答案)

    4590: [Shoi2015]自动刷题机 题目:传送门 题解: 很明显的一道二分题. 对于二分性的判断:如果n越大,那么AC的题就越少,n越小,AC的题就越多,那么最大最小值都满足单调性,直接瞎搞. ...

  2. iOS学习必须了解的七大手势

    文章只要你有一点点基础应该就可以看的懂,文章只为学习交流 #import "ViewController.h" @interface ViewController () @prop ...

  3. Under ubuntu 12.04,install sublime text 2

    Sublime Text is an awesome text editor. If you’ve never heard of it, you should check it out right n ...

  4. [JZOJ5166] [NOIP2017模拟6.26卢学魔] 解题报告 (记忆化搜索|拓扑排序)

    题目链接: http://172.16.0.132/senior/#main/show/5166 题目: 题解: 这个没什么好讲的,就是注意生产者没人吃也不是食物链,这告诉我们要积累生物知识注意细节 ...

  5. latex简历遇到的问题

    博一时候简历就没弄出来,现在又要用了,于是找出当初的模板.发现问题在于编码. \XeTeXinputencoding "GBK" \XeTeXdefaultencoding &qu ...

  6. Date日期类 Calendar日历类 完成可视化日历

    package com.test; import java.text.DateFormat; import java.text.ParseException; import java.text.Sim ...

  7. 【转载】大型系统中使用JMS优化技巧

    [本文转自:http://www.javabloger.com/article/sun-openmq-jms-large-scale-systems.html] 我们先来看看在Sun OpenMQ系统 ...

  8. Swift 闭包中 self? 的由来

    class UIViewSpringAnimator: SwipeAnimator { // 动画完成的闭包 var completion:((Bool) ->Void)? func addCo ...

  9. Docker学习笔记(1)----认识Docker

    1. 什么Docker? Docker是一个能把开发的应用程序自动部署到容器的引擎,它使用go语言编写的开源引擎,它在github上面个的地址为:https://github.com/docker/d ...

  10. ActiveMQ学习笔记(1)----初识ActiveMQ

    1. 什么是ActiveMQ? ActiveMQ是Apache推出的,一款开源的,完全支持JMS1.1和j2ee1.4规范的JMS Provider实现的消息中间件(Message Oriented ...