html5手势操作与多指操作封装与详解

手势函数封装如下:

html5手势操作与多指操作封装与详解

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;     } }

相关文章