按钮：因为单指的势铀仉拖动(drag)手势是互相冲突的，须要一种特别的交互方法来进行区分，这里是经由过程特定的区域来区分，类似于一个按钮，当在按钮上操作时，是单指缩放或者扭转，而在按钮区域外，则是惯例的拖动，实践证实，这是一个用户很轻易接收且体验较好的操作方法;

图中由a向量单指放大年夜到b向量，对操作元(正方形)素进行了中间放大年夜，此时缩放值即为b向量的模 / a向量的模;

// 计算单指操作时的基准点，获取operator的中间点； 
 
let singleBasePoint = getBasePoint(operator); 
 
  
 
// touchstart 上钩算初始向量模； 
 
let pinchV1 = getVector(startPoint,singleBasePoint); 
 
singlePinchStartLength = getLength(pinchV1); 
 
  
 
// touchmove 上钩算及时向量模； 
 
pinchV2 = getVector(curPoint, singleBasePoint); 
 
singlePinchLength = getLength(pinchV2); 
 
  
 
// 触发事宜； 
 
this._eventFire('singlePinch', { 
 
    delta: { 
 
        scale: singlePinchLength / singlePinchStartLength, 
 
    }, 
 
    origin: ev, 
 
}); 

singleRotate(单指扭转)

浇忧ⅴ指缩放和双指扭转，可以很简单的知道 θ就是我们需要的扭转角度;

// 获取初始向量与及时向量 
 
let rotateV1 = getVector(startPoint, singleBasePoint); 
 
let rotateV2 = getVector(curPoint, singleBasePoint); 
 
  
 
// 经由过程 getAngle 获取扭转角度并触发事宜； 
 
this._eventFire('singleRotate', { 
 
    delta: { 
 
        rotate: getAngle(rotateV1, rotateV2), 
 
    }, 
 
    origin: ev, 
 
});  

活动增量

因为touchmove事宜是个高频率的及时触发事宜，一个拖动操作，其实触发了N次的touchmove事宜，是以计算出来的值只是一种增量，即代表的是一次 touchmove事宜增长的值，只代表一段很小的值，并不是最终的结不雅值，是以须要由mtouch.js外部保护一个地位数据，类似于:

//    真实地位数据； 
 
let dragTrans = {x = 0,y = 0}; 
 
  
 
// 累加上 mtouch 所传递出的增量 deltaX 与 deltaY; 
 
dragTrans.x += ev.delta.deltaX; 
 
dragTrans.y += ev.delta.deltaY; 	
			
 4/5   首页 上一页 2 3 4 5 下一页 尾页
	
			

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


本文标题：HTML5中手势原理分析与数学知识的实践
地址：http://www.17bianji.com/lsqh/36718.html
 1/2    1