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. 云server之间实时文件同步和文件备份的最简单高效的免费方案

     分布于不同云计算中心的多台云server,通常须要进行文件同步.以满足业务的须要. 传统的文件同步方案,部署繁琐.同步实时性差.无法令人惬意. 端端Clouduolc,一款纯p2p方式的文件实时 ...

  2. ThinkPHP5.0框架开发--第1章 Tp5.0安装

    ThinkPHP5.0框架开发--第1章 Tp5.0安装 第1章 Tp5.0 安装 ======================================================== 今 ...

  3. 乔治·霍兹(George Hotz):特斯拉、谷歌最可怕的对手!

    17岁破解iPhone,21岁攻陷索尼PS3:现在,他是埃隆·马斯克最可怕的对手.   黑客往事   许多年后,当乔治·霍兹(George Hotz)回首往事,一定会把2007年作为自己传奇人生的起点 ...

  4. Codeforces 982 B. Bus of Characters(模拟一个栈)

    解题思路: 排序之后模拟一个栈(也可以用真的栈),时间复杂度o(n). 代码: #include <bits/stdc++.h> using namespace std; typedef ...

  5. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  6. kindEditor编写插件遇到的问题

    kindEditor是一个功能强大的在线文本编辑器,而且提供了插件扩展功能,更好的满足用户各方面的需求.在项目中,我们就有如此的需求:在kindEditor编辑器中,添加一条下划线,并且在下划线的中间 ...

  7. bat脚本启动exe并打开文件后退出 + 中文乱码

    写了个脚本用于复制模板到新的cpp文件. 将脚本路径加到环境变量里,只需在cmd窗口输入“new hdu 1419”,就会自动将模板拷贝到WORK_DIR下的hdu文件夹内一个名叫"1419 ...

  8. 优动漫PAINT-朱槿花的画法

    火红夺目的朱槿花,绝对是烘托画面的绝佳布景!画法发非常简单,毫无绘画基础的人也能够将它很好的呈现出来哟~ 教程是简单,呃.... 没有优动漫PAINT软件肿么办? 别着急,╭(╯^╰)╮ 小编给你送来 ...

  9. Matlab--从入门到精通(chapter2 matlab 基础知识)

    Chapter2 Matlab 基础知识 1.基本数学运算符号 注:矩阵的右除是一般意义的除法,但是左除具有对称意义,即A./B=B.\A 2. 命令行中的常用标点 3.常见的操作命令 4.输出数据显 ...

  10. selenium自动化(三).........................................框架篇

    三.Unittest框架介绍: 1.Unittest类似于java中的Junit,功能较为简单,逻辑简单,理解和使用起来比较简单 1)       安装:自带框架,无需安装 2)       使用:可 ...