码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-02-28 22:45:18      阅读:522      评论:0      收藏:0      [点我收藏+]

标签:get   art   ini   tar   eve   var   div   chm   move   

手势函数封装如下:

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

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

标签:get   art   ini   tar   eve   var   div   chm   move   

原文地址:https://www.cnblogs.com/pomelott/p/10453552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!