移动端二三事【六】：移动端多指操作事件，多指应用及函数封装。

一、基本事件介绍：

gesture相关事件只有IOS下存在，安卓需自己封装！

css()函数等详细信息需有前几篇随笔的基础！

事件1：gesturestart

触发条件：当手指触摸元素 且 当前屏幕上有两根或者两根以上的手指

事件2：gesturechange

触发条件：当已经触发了gesturestart时，手指位置发生变化

事件3：gestureend

触发条件：当已经触发了gesturestart时，然后抬起手指，这时屏幕上的手指个少于2个或者当前元素没有手指了，触发gestureend。

document.addEventListener('touchstart', function(e) {
    e.preventDefault();
});
window.onload = function(){
    var box = document.querySelector('#box');

    box.addEventListener('gesturestart', function(e) {
        this.style.background = "blue";
    });

    box.addEventListener('gesturechange', function(e) {
        this.style.background = "blue";
    });

    box.addEventListener('gestureend', function(e) {
        this.style.background = "red";
    });
};

二：多指移动gesturechange参数详解

1.缩放比

box.addEventListener('gesturechange', function(e) {
        //e.scale; 缩放比：change时两根手指之间距离 和 start时两根手指之间的距离比值
        this.innerHTML = e.scale; 
    });

利用缩放比完成图片缩放：

document.addEventListener('touchstart', function(e) {
    e.preventDefault();
});
window.onload = function(){
    var box = document.querySelector('#box');
    var startScale = 0;
    //上一次的缩放值
    box.addEventListener('gesturestart', function(e) {
        startScale = css(box,"scale");
    });
    //移动时的缩放值
    box.addEventListener('gesturechange', function(e) {
        //两次缩放值相乘
        css(box,"scale",e.scale*startScale);
    });

};

2.角度差（正时针旋转为正值，逆时针旋转为逆值）

box.addEventListener('gesturechange', function(e) {
        //e.rotation 旋转差: change时两根手指形成的直线和start时两根手指形成的直线，中间形成夹角
        this.innerHTML = e.rotation;
    });

利用角度差完成图片旋转：

document.addEventListener('touchstart', function(e) {
    e.preventDefault();
});
window.onload = function(){
    var box = document.querySelector('#box');
    var startRotate = 0;

    box.addEventListener('gesturestart', function(e) {

        startRotate = css(box,"rotate");
    });
    box.addEventListener('gesturechange', function(e) {

        css(box,"rotate",e.rotation + startRotate);
    });
};

三、安卓函数封装

1.初始化参数说明：

　　 init:{
        el:element//元素, (必填)
        start:fn//gesturestart要做的操作,
        change:fn//gesturechange要做的操作,
        end:fn//gestureend要做的操作
    }

2.函数封装：

function getDis(point1,point2){
    var x = point2.x - point1.x;
    var y = point2.y - point1.y;
    return Math.sqrt(x*x + y*y);
}
// Math.atan2(y,x) 斜率 由一条直线与X轴正方向所成角的正切 返回值弧度
// 角度转弧度: deg*Math.PI/180
//弧度转角度: rad*180/Math.PI 
function getDeg(point1,point2){
    var x = point2.x - point1.x;
    var y = point2.y - point1.y;
    return Math.atan2(y,x)*180/Math.PI; 
}
function setGesture(init){
    var el = init.el;
    var isGestrue = false; 
    var startPoint = [];
    if(!el){
        return;
    }
    el.addEventListener('touchstart', function(e) {
        if(e.touches.length >= 2){
            isGestrue = true; //记录当前用户触发了gesture
            startPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
            startPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY}; 
            init.start&&init.start.call(el,e);
        }
    });
    el.addEventListener('touchmove', function(e) {
        if(isGestrue&&e.touches.length >= 2){
            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[0],startPoint[1]);
            var nowDis = getDis(nowPoint[0],nowPoint[1]);
            var startDeg = getDeg(startPoint[0],startPoint[1]);
            var nowDeg = getDeg(nowPoint[0],nowPoint[1]);
            e.scale = nowDis/startDis;
            e.rotation = nowDeg - startDeg;
            init.change&&init.change.call(el,e);
        }
    });
    el.addEventListener('touchend', function(e) {
        if(isGestrue){
            if(e.touches.length < 2 || e.targetTouches.length < 1){
                isGestrue = false;
                init.end&&init.end.call(el,e);
            }
        }
    });
}

3.调用：

 

document.addEventListener('touchstart', function(e) {
    e.preventDefault();
});
window.onload = function(){
    var box = document.querySelector('#box');
    var startRotate = 0;
    var startScale = 0;
    css(box,"translateZ",0.01);
    setGesture({
        el: box,
        start: function(e){
            //startRotate = css(this,"rotate");
            startScale = css(this,"scale");
        },
        change:function(e){
            css(this,"rotate",startRotate + e.rotation);
            css(this,"scale",startScale * e.scale);
        }
    })
};