这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异)。这个
事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,
gestureend三个事件回调:
gesturestart // 当有两根或多根手指放到屏幕上的时候触发
gesturechange // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发
gestureend // 当倒数第二根手指提起的时候触发,结束gesture
|
事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例
)信息和rotation(两根手指间连线转动的角度)信息。
当两根或以上的手指在屏幕上活动的时候,我们可以做出一些较为复杂的手势。这将涉及到普通的mouse事
件,touch事件和gesture事件,情况比较复杂。touch已经在第一篇文章里详细介绍,这里就简单带过。
我们还是先看看当分别将两根手指放到屏幕上的时候,会触发哪些事件吧:
1、第一根手指放下,触发touchstart,除此之外什么都不会发生(请参照第二篇文章,手指提起才会触发
mouse的各事件)
2、第二根手指放下,触发gesturestart
3、触发第二根手指的touchstart
4、立即触发gesturechange
5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
7、触发第二根手指的touchend
8、触发touchstart!注意,和第一篇文章里介绍的一样,多根手指在屏幕上,提起一根,会刷新一次全局
touch!重新触发第一根手指的touchstart,这点和苹果官方网站上介绍的不同。
9、提起第一根手指,触发touchend
Gesture事件的处理和Touch类似,我们一般会在gesturechange的时候利用GestureEvent对象中的信息来
做一些事情:
var angle = event.rotation;
var scale = event.scale;
|
这样能够取得scale和rotation信息,然后我们可以:
e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation +
startRotation + 'deg)' ;
|
这段代码能让element随着你的两根手指的运动而转动、伸展。以下是一段测试代码,请用
ipad/iphone/android打开: http://wanglingshu.com/wp-content/uploads/ios-gesture.html
还有一件要说明的事情是,对于复杂手势,是否会触发某些鼠标事件?确实有,不过我只找到了一个。不管
你的两根手指在屏幕上伸缩还是转动,都不会有任何鼠标事件触发,但当你的两根手指同时朝上或者朝下移动
的时候,则会触发某些事件。请看下图:
两根手指同时向上或向下滚动,如果target element是一个scrollable element(也就是绑定了mousewheel的
element)的话,将会触发mousewheel事件。如果不是scrollable element,则当手指停止移动的时候,会触
发onscoll。这里请和第二篇文章的body scroll区别一下,如果你要滚动body,只需要一根手指轻轻拂动屏幕
,但是你要滚动一个内部div或者iframe,则需要动用两根手指。 这也是多触式设备一个不太方便的地方。而对于我们开发者来说,这种不方便被放大了。。。因为从用户体
验角度来说,要求用户使用两根手指滚动一个内部element显然是不合适的,而要实现像滚动body一样用一根
手指优雅地滚动,我们必须利用touchevent,在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的
多触式滚动组件:iscroll-4
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
用起来很简单,new一个iScroll对象,传入需要滚动的inner element作为参数就行了。
相关推荐
内含计算机图形学——基于MFC三维图形开发 孔令德版的课件以及第二章示例的完整源代码
这份作业合集适用于所有对网页设计、前端开发感兴趣的人,无论你是学生、初学者还是有一定经验的开发者。无论你是想学习新的技术,还是想了解一个完整的项目开发流程,这份资料都将为你提供极大的帮助。 使用建议:...
微营销——指尖的利器 pdf电子书 传统营销和微营销
指尖上的美味——手机里不可或缺的美食APP推荐.pdf
——95后手机使用行为调研报告指尖上的生活人群定义:95后:95-99年出生,年龄16-19岁,初中/高中/职高/大学为主, 少部分工作90后:90-94年出生
包含 PC2002取模软件 PL2303安装使用教程 参考程序 单片机程序下载软件STC-LSP 各种串口模块驱动程序 上位改字工具 指尖陀螺组装说明 陀螺程序下载方法 陀螺电路图
手势指尖检测算法c++实现,使用肤色分割算法将手势从复杂背景中分离出来,通过检测手指指尖进行手指识别。
简单自学web前端——切片-附件资源
压缩包里面包含两个记事本,分别为获取指尖数目、手势识别外文链接,里面都是本人硕士期间研究指尖识别过程中所涉及的内容,大部分从github上下载,把他们总结到一块,给研究手势识别的同学提供方便,可以进去打开看...
基于opencv+Mediapipe+CNN实现用手势识别控制对鼠标操控源码+项目说明+exe可执行程序.zip 鼠标操作 指尖移动来操控鼠标移动:通过手指的相对移动与移动的速度来操纵鼠标的移动 手势操控实现鼠标点击功能:通过...
采用Leap Motion传感器进行手势的三维空间坐标信息采集,从中提取指尖坐标及方向向量信息,建立手势识别模型,构建手势特征数据。对特征数据进行归一化处理后输入到支持向量机进行训练,实现对特定手势的识别。实验...
提出了一个基于深度信息对手指和手部进行实时跟踪,并可用于手势识别的方案...实验结果证明该方案识别追踪效果稳定且高效,不受光照和复杂背景影响,能够同时跟踪双手共10个手指和2个掌心的动作轨迹,并用于手势识别。
基于轮廓的识别算法能够很好地处理手势的外观变化,但现有的识别算法在目标旋转和缩放时其识别率和鲁棒性较低,针对这一问题提出了一种基于指尖点和Hu不变矩的手势识别方法。该方法对基于曲率的指尖检测方法进行改进...
处理用户的手以检测指尖和手势_C++_C_下载.zip
移动端前端开发资料库 基于 mobileTech 上完善,感谢前期,后期名 筛选了一些基础知识和新的知识,去掉了一些老旧的方案.定期更新. 来自的一些移动端经验总结干货 本资料很多引用了指尖上的js系列,在此向作者表示...
“指尖时代”大学生英语学习APP使用情况调查研究——以杭州高校为例.pdf
动态手势的识别部分,在特征提取阶段,将手心坐标作为手势的位置,并将 手心在空间中运动形成的一系列二维坐标点作为手势的轨迹,再把相邻的坐标点 间的方向角量化后得到的方向向量作为动态手势的特征向量。其中,...
openCV openGL 以由红外光照明滤除背景干扰 实现指尖的三维定位 由手指实时地操纵openGL显示的物体