手势函数封装如下:
function gesture(init){ var isGesture = false; var el = init.el; var startDis = 0; var startDeg = 0; //console.log(getDeg({pageX:0,pageY:0},{pageX:-100,pageY:100})); el.addEventListener(‘touchstart‘, function(e) { var touch = e.touches;//当前屏幕上的手指列表 if(touch.length >= 2){//当前屏幕有两根以上的手指 isGesture = true; startDis = getDis(touch[0],touch[1]);//start时两根手指之间的距离 startDeg = getDeg(touch[0],touch[1]);//start时,两根手指形成的直线 和 x轴形成一个逆时针的夹角 init.start&&init.start.call(el,e); //this.innerHTML = startDis; } }); el.addEventListener(‘touchmove‘, function(e) { var touch = e.touches;//当前屏幕上的手指列表 if(touch.length >= 2&&isGesture){//当前屏幕有两根以上的手指 var nowDis = getDis(touch[0],touch[1]);// move时两根手指之间的距离 var nowDeg = getDeg(touch[0],touch[1]);//move时,两根手指形成的直线 和 轴形成一个逆时针的夹角 e.scale = nowDis/startDis; e.rotation = nowDeg - startDeg; init.change&&init.change.call(el,e); } }); el.addEventListener(‘touchend‘, function(e) { if(isGesture){ init.end&&init.end.call(el,e); } isGesture = false; }); function getDis(point,point2){ var x = point2.pageX - point.pageX; var y = point2.pageY - point.pageY; return Math.sqrt(x*x + y*y); } function getDeg(point,point2){ var x = point2.pageX - point.pageX; var y = point2.pageY - point.pageY; return Math.atan2(y,x)*180/Math.PI; } }