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

Posted 2021-02-11 pomelott

手势函数封装如下：

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;

    }

}