HTML5中手势原理分析与数学知识的实践

let curPoint = getPoint(ev,0);

// 经由过程A、B两点，及时的计算出位移增量，触发 drag 事宜并传出参数；

_eventFire('drag', {

delta: {

deltaX: curPoint.x - startPoint.x,

deltaY: curPoint.y - startPoint.y,

origin: ev,

});

Pinch(双指缩放)

上图是双指缩放的模仿图，双指由a向量放大年夜到b向量，经由过程初始状况时的a向量的模与touchmove中获取的b向量的模进行计算，便可得出缩放值：

// touchstart上钩算初始双指的向量模； 
 
let vector1 = getVector(secondPoint, startPoint); 
 
let pinchStartLength = getLength(vector1); 
 
  
 
// touchmove上钩算及时的双指向量模； 
 
let vector2 = getVector(curSecPoint, curPoint); 
 
let pinchLength = getLength(vector2); 
 
this._eventFire('pinch', { 
 
    delta: { 
 
        scale: pinchLength / pinchStartLength, 
 
    }, 
 
    origin: ev, 
 
});

Rotate(双指扭转)

初始时双指向量a，扭转到b向量，θ就是我们须要的值，是以只要经由过程我们膳绫擎构建的getAngle函数，便可求出扭转的角度：

// a向量； 
 
let vector1 = getVector(secondPoint, startPoint); 
 
  
 
// b向量； 
 
let vector2 = getVector(curSecPoint, curPoint); 
 
  
 
// 触发事宜; 
 
this._eventFire('rotate', { 
 
    delta: { 
 
        rotate: getAngle(vector1, vector2), 
 
    }, 
 
    origin: ev, 
 
});

singlePinch(单指缩放)

3/5 首页上一页 1 2 3 4 5 下一页尾页

　　推荐阅读

　　机械键盘到底怎么选？300块钱买把真值吗？

国外的Techpowerup网站针对网友做了一项问卷查询拜访，标题是你愿意购买若干钱的键盘，至8月1日投票截止共获得8689张投票。在问卷查询拜访的5个选项中，50美元以下的选项占据了最多，然则>>>详细阅读

本文标题：HTML5中手势原理分析与数学知识的实践

地址：http://www.17bianji.com/lsqh/36718.html

1/2 1