html5手勢操做與多指操做封裝與Canvas圖片裁切實戰

時間 2019-12-09

標籤 html5 html 手勢多指封裝 canvas 圖片裁切實戰欄目 HTML5 简体版

原文原文鏈接

當前狀況，移動端的開發佔比愈來愈高，單指的拖拽觸碰等操做是常規須要。特殊的多指操做與手勢操做還需另作處理，並且還涉及到兼容性問題。css

// 屏幕上存在兩根或兩根以上的手指 時觸發  僅IOS存在手勢事件，安卓不存在須要另外封裝
// gesturestart   多指操做觸發時
// gesturechange  兩根手指發生變化時
// gestureend  兩根手指所有擡起時

* 首先是手勢操做的參數說明canvas

    init:{
        el: 要添加事件的元素,
        start: 摁下時 要操做的事情(gesturestart),
        change: 手指移動時的回調(gesturechange)function(e){
            e.scale//在change時，手指之間的距離 和 start時手指之間距離的比值
            e.rotation//在change時和start時 手指旋轉角度的差值
        },
        end: 多指觸碰結束的回調(gestureend)
    }

* 須要用到Math的一個函數： Math.atan2(y, x) 跨域

意爲：x軸和點（x, y）與（0, 0）連線逆時針方向造成的夾角服務器

*封裝以下：函數

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

縮放卡頓，不流暢的解決方法：this

在每次進行手勢操做的時候，從新設置縮放值爲1spa

    var box = document.querySelector('#box');
    var startScale = 1;
    css(box,"scale",1);
    gesture({
        el:box,
        start: function(){
            startScale = css(box,"scale");
            this.style.background = "blue";
        },
        change: function(e){
            // this.innerHTML = "scale:" + e.scale;
            // this.innerHTML += "<br/>rotate:" + e.rotation;
            css(this,"scale",e.scale*startScale);
        },
        end: function(){
            this.style.background = "red";
        }
    });