HTML5手势检测原理和实现

'onLongPress');

});

}

_onTouchMove(e) {

...

clearTimeout(this.longPressTimeout);

...

}

_onTouchEnd(e) {

...

clearTimeout(this.longPressTimeout);

...

}

缩放(pinch)

缩放是一个异常有趣的手势，还记得第一代iPhone双指缩放图片给你带来的┞佛撼吗?固然如斯，缩放手势的检测却相对简单。

缩放是两个手指的行动，须要检测屏幕上是否有两个接触点。

缩放比例的量化，是经由过程两次缩放行动之间的距离的比值获得，如下图。

HTML5手势检测道理和实现

所以缩放的核心是获取两个接触点之间的直线距离。

_onTouchStart(e) {  
if(e.touches.length > 1) {  
let point1 = e.touches[0];  
let point2 = e.touches[1];  
let xLen = Math.abs(point2.pageX - point1.pageX);  
let yLen = Math.abs(point2.pageY - point1.pageY);  
this.touchDistance = this._getDistance(xLen, yLen); 
 } else {  
...  
} 
 }

在_onTouchStart函数中获取并且保存 touchstart 产生时两个接触点之间的距离。

_onTouchMove(e) {  
if(e.touches.length > 1) {  
let xLen = Math.abs(e.touches[0].pageX - e.touches[1].pageX);  
let yLen = Math.abs(e.touches[1].pageY - e.touches[1].pageY); 
 let touchDistance = this._getDistance(xLen,yLen);  
if(this.touchDistance) {  
let pinchScale = touchDistance / this.touchDistance; 
 this._emitEvent('onPinch',{scale:pinchScale - this.previousPinchScale});  
this.previousPinchScale = pinchScale;  
} 
 }else {  
...  
}  
}

扭转(rotate)

扭转手势须要检测两个比较重要的值，一是扭转的角度，二是扭转的偏向(顺时针或逆时针)。

个中扭转角度和偏向的枷⒚须要经由过程向量的计算来获取，本文不再展开。

HTML5手势检测道理和实现

//勾股定理  
_getDistance(xLen,yLen) {  	
			 3/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　还可以这么玩：盘点iOS 11中Siri的12项新功能
            
            Siri有了更多的新机能，经由过程分享社交账号QR码获得更活泼的形象，以及它可以吹奏DJ。以下是对iOS 11中Siri的所有操作方法的总结：1.跨设备同步经由过程iOS 11体系，Siri可以总结并适应>>>详细阅读


本文标题：HTML5手势检测原理和实现
地址：http://www.17bianji.com/lsqh/37633.html
 1/2    1