今早在segmentfault上看到一篇文章《超小Web手勢(shì)庫(kù)AlloyFinger原理》，最后提到一個(gè)多點(diǎn)觸控的介紹蛋铆，因?yàn)闆](méi)寫(xiě)過(guò)所以覺(jué)得應(yīng)該蠻有意思，以下是我寫(xiě)完旋轉(zhuǎn)demo后，對(duì)問(wèn)題從分析到解決的過(guò)程：
- 多點(diǎn)觸控如何判定衡瓶？
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)你把兩個(gè)手指放在container上之后，event.touches這個(gè)數(shù)組的長(zhǎng)度變?yōu)?牲证。然后從里面取出所需坐標(biāo)即可哮针。
- 針對(duì)旋轉(zhuǎn)問(wèn)題，角度如何計(jì)算坦袍？
這里要用到向量的點(diǎn)乘十厢，先上個(gè)公式：
a?b = a.x乘b.x + a.y乘b.y = |a||b|cosθ
這里a.x代表a向量的x，a.y代表a向量的y键闺， |a|代表向量的模寿烟，也就是長(zhǎng)度。
通過(guò)點(diǎn)乘的公式辛燥，我們可以把cosθ算出來(lái)筛武，然后進(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)時(shí)徘六，無(wú)法確定方向。
3.如何判斷旋轉(zhuǎn)方向榴都？
這里要用到向量的叉乘待锈。簡(jiǎn)單的說(shuō)，叉乘計(jì)算結(jié)果的數(shù)值部分嘴高，對(duì)應(yīng)兩個(gè)向量圍成的平行四邊形的面積竿音，而正負(fù)值則對(duì)應(yīng)法向量的方向和屎，法向量的方向符合“右手定則”。于是我們通過(guò)計(jì)算結(jié)果的正負(fù)春瞬，來(lái)判斷旋轉(zhuǎn)是順時(shí)針還是逆時(shí)針柴信。
叉乘公式：
理論部分結(jié)束了，下面進(jìn)入實(shí)戰(zhàn)宽气。
首先随常，需要為container綁定各種touch事件：
container.addEventListener('touchstart', touchStart );
container.addEventListener('touchmove', touchMove );
container.addEventListener('touchend', touchEnd );
我們?cè)趖ouchStart里記錄起始向量（由兩個(gè)觸點(diǎn)的位置表示），touchMove記錄移動(dòng)過(guò)程中的向量萄涯，touchEnd里對(duì)歷史角度進(jìn)行存儲(chǔ)绪氛。
然后定義一些數(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;
};
然后寫(xiě)一些公式：
//計(jì)算點(diǎn)乘
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)) ;
}
//計(jì)算叉乘
function calculateVC( vector1, vector2 ){
return (vector1.x * vector2.y - vector2.x * vector1.y) > 0? 1: -1 ;
}
寫(xiě)touchmove的時(shí)候，要注意旋轉(zhuǎn)角度的累計(jì)：
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里對(duì)historyDeg進(jìn)行記錄：
if( endMark == false ){
_historyDeg += _allDeg;
endMark = true ;
}
這里為什么增加了一個(gè)標(biāo)志位涝影，原因是兩個(gè)手指分別會(huì)調(diào)用一次touchEnd枣察，而我只需要記錄一次....
demo和代碼在這里，請(qǐng)用手機(jī)打開(kāi)袄琳，兩個(gè)手指進(jìn)行旋轉(zhuǎn)询件。
最后，我們?cè)趺凑{(diào)試唆樊？由于原來(lái)一直使用的jsconsole掛了宛琅，搜了一下，發(fā)現(xiàn)eruda非常好用逗旁，強(qiáng)烈推薦嘿辟。
