# 移动端页面的多点触控——旋转

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

1. 针对旋转问题，角度如何计算？

a•b = a.x乘b.x + a.y乘b.y = |a||b|cosθ

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

3.如何判断旋转方向？

``````container.addEventListener('touchstart', touchStart );
``````

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

``````              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)';
``````

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

demo和代码在这里，请用手机打开，两个手指进行旋转。