html 5ジェスチャー操作と多指操作パッケージとCanvas画像裁断実戦

現在の状況では,移動端の開発割合はますます高くなり,単指のドラッグタッチなどの操作が従来の必要である.特殊な多指操作とジェスチャー操作は別途処理する必要があり、互換性の問題にも関連している.

//                       IOS      ，           
// gesturestart          
// gesturechange           
// gestureend           

*まずジェスチャー操作のパラメータ説明

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

スケールカートン、スムーズでない解決方法:
ジェスチャー操作を行うたびに、ズーム値を1に再設定します.

    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 += "
rotate:" + e.rotation;
            css(this,"scale",e.scale*startScale);
        },
        end: function(){
            this.style.background = "red";
        }
    });

画像カット実戦:
必要な知識点:
1. getContext('2d')
canvas 2 dキャンバスコンテキストの取得
2. canvas  drawImg(imgDom, x, y, width, height)  
この方法は、キャンバスにパラメータ対応のピクチャを描画するためにimgロードが完了するまで使用する必要があります.
3. getImageData(x, y, width, height)
パラメータ対応領域の画像情報を取得します(サーバ環境で使用する必要があり、ドメインをまたぐことはできません).
4.putimageData(ImageDataObj, x, y)
APIを参照できるオプションのパラメータも多数あります
canvasの以上の4つの知識点にパッケージされたgestureイベントを加えると、ピクチャカット機能が完了します.