移动端的多指事件以及原生JS封装通用多指事件

移动端的多指事件以及用原生JS封装通用多指事件

IOS的多指事件

事件类型：

gesturestart: 手指触碰当前元素，屏幕上有两个或者两个以上的手指
gesturechange:手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动。
gestureend:在gesturestart后, 屏幕上只剩下两根以下（不包括两根）的手指

Event额外新增的属性

属性 rotation : 表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转。

属性scale :表示发生多指触摸事件的元素随着手指之间距离变大而增长得比例。

封装可以在安卓端使用的多指事件函数

(function (w) {
w.gesture = function (ele,callback) {
        let isStart = false;
        ele.addEventListener('touchstart',function (event) {
            if(event.touches.length >= 2){
                isStart = true ;
                //记录两个触点间的初始距离
                this.startDistance =getDistance(event.touches[0],event.touches[1]);

                //记录两个触点的初始角度
                this.startDeg =getDeg(event.touches[0],event.touches[1]);

                //判断是否传入回调，调用回调函数
                if(callback && typeof callback['start'] === "function"){
                    callback['start']();
                }
            }
        });
        ele.addEventListener('touchmove',function (event) {
            //判断移动时屏幕上的触点个数
            if(event.touches.length >= 2){
                //计算两个触点的实时距离
                const currDistance = getDistance(event.touches[0], event.touches[1]);
                //记录两个触点的实时角度
                const currDeg = getDeg(event.touches[0], event.touches[1]);
                //计算实时距离与初始距离的比例，传入event的属性中
                event.scale = currDistance / this.startDistance;
                //计算实时角度与初始角度的差值，传入event的属性中
                event.rotation = currDeg - this.startDeg;

                //判断是否传入回调，调用回调函数
                if(callback && typeof callback['change'] === "function"){
                    //将event传回去
                    callback['change'](event);
                }
            }
        });
        // 手指离开当前元素时，先判断当前的触点是否小于2，是否曾触发过touchstart事件
        ele.addEventListener('touchend',function (event) {
            if(event.touches.length < 2 && isStart){
                //此时调用end回调
                if (callback && typeof(callback['change']) === 'function') {
                    callback['end']();
                }
                //重置isStart为false
                isStart = false;
            }
        });

        // 获取两个点之间的距离
        function getDistance(touch1,touch2) {
            const a = touch1.clientX - touch2.clientX;
            const b = touch1.clientY - touch2.clientY;
            //勾股定理，得出两点距离长度
            return Math.sqrt(a * a + b * b);
        }
        // 获取两个触点的角度
        function getDeg(touch1,touch2) {
            const x = touch1.clientX - touch2.clientX;
            const y = touch1.clientY - touch2.clientY;
            //tan值 = 对边Y / 临边X
            const radian = Math.atan2(y, x);
            return radian * 180 / Math.PI;
        }
    }
})(window);

使用方法：

获取发生多指触摸事件的元素

const boxNode = document.querySelector('#box');

定义初始比例与旋转角度

let iniScale = 1, iniRotate = 0;

调函数

gesture(boxNode,{
  start:function () {
     iniScale = transformCss(boxNode,'scale');
     iniRotate = transformCss(boxNode,'rotate');
  },
  change:function (event) {
     transformCss(boxNode,'scale',event.scale*iniScale);
     transformCss(boxNode,'rotate',iniRotate + event.rotation);
     }
  })

注：transform是一个可以获取与设置css中transform值的函数，具体封装方法见之前博客。