移动端多指触屏事件兼容

最新推荐文章于 2024-08-19 10:06:43 发布

玉帛逸

最新推荐文章于 2024-08-19 10:06:43 发布

阅读量2.1k

点赞数 1

分类专栏：移动端文章标签：触摸屏移动端多指触摸兼容 web前端

本文链接：https://blog.csdn.net/liming911911/article/details/75083223

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ios下有多指触屏事件，如
gesturestart：当手指触摸屏幕，并且有两根以上手指执行;
gesturechange：当有两根或多根手指在屏幕上，并且有手指移动的时候触发;
gestureend：当多余两根手指头抬起时执行;
本事件下有我们常用的事件如多指缩放 e.scale 多指旋转e.rotation 等，这里我们处理缩放事件

但是此事件在安卓下并不兼容，显然这事件是不可行的，为了兼容安卓和iOS，我们需要自己去封装多指事件；
这里我只贴出部分代码解释，首先，封装一个setGesture方法，此方法就是完全替代iOS下的多指事件，
setGesture方法接收一个参数inti，此参数为一个对象，对象里有四个属性，分别为el、start、change和end，
el是必须有的，为传入的元素，如 document.getElementById(id)；
start是可选的，和iOS下gesturestart的属性相同：实现当手指触摸屏幕，并且有两根以上手指执行;
change是可选的，和iOS下gesturechange的属性相同：实现当有两根或多根手指在屏幕上，并且有手指移动的时候触发;
end是可选的，和iOS下gestureend的属性相同：当多余两根手指头抬起时执行;

如

setGesture({
    el: 元素,
    start: function (e) {
        //相应的逻辑...
    },
    change: function (e) {
        //相应的逻辑...
    },
   end: function (e) {
         //相应的逻辑...
    }
})

/*
inti：{
    el:element, //元素对象(必须)
    start:fn,
    change:fn,
    end:fn,
}
*/
function setGesture(inti) {
    var el = inti.el;
    if (!el) return;

    var scaleStart = 0;
    var isGesture = false;
    var startPoint = [];

    //斜率  Math.atan2(y,x)  由一条直线与x轴正方向所成的角的正切 返回值的弧度
    //角度转弧度  Math.PI/180
    //弧度转角度  rad*180/Math.PI

    el.addEventListener('touchstart', function (e) {
        if (e.touches.length >= 2) {
            isGesture = true;//记录进行了多指操作

            startPoint[0] = { x: e.touches[0].pageX, y: e.touches[0].pageY };
            startPoint[1] = { x: e.touches[1].pageX, y: e.touches[1].pageY };                

            inti.start && inti.start.call(el, e);//手指按下时执行
        }
    });
    el.addEventListener('touchmove', function (e) {
        if (e.touches.length >= 2 && isGesture) {
            var nowPoint = []; //移动时手指的坐标点
            nowPoint[0] = { x: e.touches[0].pageX, y: e.touches[0].pageY };
            nowPoint[1] = { x: e.touches[1].pageX, y: e.touches[1].pageY };
            var startDis = getDis(startPoint[1], startPoint[0]);
            var nowDis = getDis(nowPoint[1], nowPoint[0]);
            e.scale = nowDis / startDis;//手指移动时的距离与开始时的手指距离的比值

            var startDeg = getDeg(startPoint[1], startPoint[0]);
            var nowDeg = getDeg(nowPoint[1], nowPoint[0]);
            e.rotation = nowDeg - startDeg;//多指旋转的角度

            inti.change && inti.change.call(el, e);//手指移动时执行
        }
    });
    el.addEventListener('touchend', function (e) {
        if (isGesture) {
            //e.touches:当前屏幕的手指列表  e.targetTouches：当前元素的手指列表
            if (e.touches.length < 2 || e.targetTouches.length < 1) {
                isGesture = false;
                inti.end && inti.end.call(el, e);//手指抬起时执行
            }
        }
    });
}

function getDis(point1, point2) {
    var x = point2.x - point1.x;
    var y = point2.y - point1.y;
    return Math.sqrt(x * x + y * y);
}
function getDeg(point1, point2) {
    var x = point2.x - point1.x;
    var y = point2.y - point1.y;
    return Math.atan2(y, x) * 180 / Math.PI;
}