js判斷鼠標旋轉度數以及順逆方向詳解

有一個需求，判斷鼠標繞某點順時針旋轉n度后做什么事，逆時針旋轉n度后作什么事，即可用到本案例

首先我們可以得到三個點，分別為中心點，起始點和結束點，於是可以知道三點的坐標，再通過余弦定理求出旋轉角度，同時可知三邊的向量，便可通過叉乘求出方向為順時針還是逆時針。

運算代碼如下：

var pointA = {
    X: 500,
    Y: 300
};
var pointB = {};
var pointC = {};               // A,B,C分別代表中心點，起始點，結束點坐標
                                       // 這里通過鼠標的移動獲取起始點和結束點
var typeMouse = false;
var allA = 0;                     // 存放鼠標旋轉總共的度數
$(document).on('mousedown', function(e) {
    pointB.X = e.pageX;
    pointB.Y = e.pageY;
    typeMouse = true;          //獲取起始點坐標
});
$(document).on('mousemove', function(e) {
    if(typeMouse) {
    pointC.X = e.pageX;
    pointC.Y = e.pageY;         // 獲取結束點坐標
    var AB = {};
    var AC= {};
    AB.X = (pointB.X - pointA.X);
    AB.Y = (pointB.Y - pointA.Y);
    AC.X = (pointC.X - pointA.X);
    AC.Y = (pointC.Y - pointA.Y);                   // 分別求出AB,AC的向量坐標表示
    var direct = (AB.X * AC.Y) - (AB.Y * AC.X);           // AB與AC叉乘求出逆時針還是順時針旋轉
    var lengthAB = Math.sqrt( Math.pow(pointA.X - pointB.X, 2) +
    Math.pow(pointA.Y - pointB.Y, 2)),
    lengthAC = Math.sqrt( Math.pow(pointA.X - pointC.X, 2) +
    Math.pow(pointA.Y - pointC.Y, 2)),
    lengthBC = Math.sqrt( Math.pow(pointB.X - pointC.X, 2) +
    Math.pow(pointB.Y - pointC.Y, 2));
    var cosA = (Math.pow(lengthAB, 2) + Math.pow(lengthAC, 2) - Math.pow(lengthBC, 2)) /
    (2 * lengthAB * lengthAC);                 //   余弦定理求出旋轉角
    var angleA = Math.round( Math.acos(cosA) * 180 / Math.PI );
    if (direct < 0){
        allA -= angleA;                       //叉乘結果為負表示逆時針旋轉， 逆時針旋轉減度數
    } else {
        allA += angleA;                       //叉乘結果為正表示順時針旋轉，順時針旋轉加度數
    }
    pointB.X = pointC.X;
    pointB.Y = pointC.Y;                   //運算結束后將起始點重新賦值為結束點，作為下一次的起始點
    }
});
$(document).on('mouseup', function(e) {
    typeMouse = false;
});