今早在segmentfault上看到一篇文章《超小Web手勢庫AlloyFinger原理》，最后提到一個多點觸控的介紹，因為沒寫過所以覺得應(yīng)該蠻有意思，以下是我寫完旋轉(zhuǎn)demo后，對問題從分析到解決的過程：

1. 多點觸控如何判定？

var touchStart = function(event){
        if( event.touches.length == 2 ){
            startVector.x1 = event.touches[0].pageX ;
            startVector.y1 = event.touches[0].pageY ;
            startVector.x2 = event.touches[1].pageX ;
            startVector.y2 = event.touches[1].pageY ;
        }
     };
container.addEventListener('touchstart', touchStart );

當(dāng)你把兩個手指放在container上之后，event.touches這個數(shù)組的長度變?yōu)?。然后從里面取出所需坐標(biāo)即可。

2. 針對旋轉(zhuǎn)問題，角度如何計算？

這里要用到向量的點乘，先上個公式：
a?b = a.x乘b.x + a.y乘b.y = |a||b|cosθ

這里a.x代表a向量的x，a.y代表a向量的y， |a|代表向量的模，也就是長度。
通過點乘的公式，我們可以把cosθ算出來，然后進(jìn)行一些從弧度到角度的轉(zhuǎn)換：

var cos  = calculateVM( vector1 , vector2 );
var angle = Math.acos(cos) * 180/ Math.PI ;

但是我們知道cosθ的范圍是-1到1，也就是從0度到180度，因此在360度旋轉(zhuǎn)時，無法確定方向。

3.如何判斷旋轉(zhuǎn)方向？

這里要用到向量的叉乘。簡單的說，叉乘計算結(jié)果的數(shù)值部分，對應(yīng)兩個向量圍成的平行四邊形的面積，而正負(fù)值則對應(yīng)法向量的方向，法向量的方向符合“右手定則”。于是我們通過計算結(jié)果的正負(fù)，來判斷旋轉(zhuǎn)是順時針還是逆時針。
叉乘公式：

叉乘.png

理論部分結(jié)束了，下面進(jìn)入實戰(zhàn)。
首先，需要為container綁定各種touch事件：

container.addEventListener('touchstart', touchStart );
container.addEventListener('touchmove', touchMove );
container.addEventListener('touchend', touchEnd );

我們在touchStart里記錄起始向量（由兩個觸點的位置表示），touchMove記錄移動過程中的向量，touchEnd里對歷史角度進(jìn)行存儲。
然后定義一些數(shù)據(jù)結(jié)構(gòu)：

    var startVector = {
        x1 : 0 ,
        x2 : 0 ,
        y1 : 0 ,
        y2 : 0 
    };
    var currentVector = {
        x1 : 0 ,
        x2 : 0 ,
        y1 : 0 ,
        y2 : 0 
    };

    function vector( x1, y1 , x2, y2 ){
        this.x = x2-x1;
        this.y = y2-y1;
    };

然后寫一些公式：

//計算點乘
    function calculateVM( vector1, vector2 ){
        return (vector1.x * vector2.x + vector1.y * vector2.y)  / ( Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y) * Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y)) ;

    }
    //計算叉乘
    function calculateVC( vector1, vector2 ){
        return (vector1.x * vector2.y - vector2.x * vector1.y) > 0? 1: -1 ;
    }

寫touchmove的時候，要注意旋轉(zhuǎn)角度的累計：

              var vector1 = new vector(startVector.x1, startVector.y1, startVector.x2,startVector.y2);
            var vector2 = new vector(currentVector.x1, currentVector.y1, currentVector.x2,currentVector.y2);
              var cos  = calculateVM( vector1 , vector2 );
            var angle = Math.acos(cos) * 180/ Math.PI ;

            var direction = calculateVC( vector1, vector2 );
            console.log( ' ' + angle+ ' '+ direction);
            _allDeg = direction*angle;
            
            container.style.webkitTransform = 'rotate(' + (_historyDeg+_allDeg) + 'deg)';

并在touchEnd里對historyDeg進(jìn)行記錄：

          if( endMark == false ){
            _historyDeg += _allDeg;
                endMark = true ;
        }

這里為什么增加了一個標(biāo)志位，原因是兩個手指分別會調(diào)用一次touchEnd，而我只需要記錄一次....

demo和代碼在這里，請用手機打開，兩個手指進(jìn)行旋轉(zhuǎn)。

最后，我們怎么調(diào)試？由于原來一直使用的jsconsole掛了，搜了一下，發(fā)現(xiàn)eruda非常好用，強烈推薦。