在HTML畫布中旋轉一個點

Question

我正在嘗試學習一些基本的矢量數學，但似乎無法得到此方法用於旋轉點的工作。旋轉矢量的大小正在擴大，我不知道角度如何。

以下是相關功能。我正在使用JavaScript/HTML畫布。

function rotate(point, center, angle) { 
    var theta = (Math.PI/180) * angle, 
     cX = center.pos.x, 
     cY = center.pos.y, 
     pX = point.pos.x, 
     pY = point.pos.y, 
     pCos = Math.cos(theta), 
     pSin = Math.sin(theta), 
     x = pX - cX, 
     y = pY - cY; 
    x = (x * pCos - y * pSin) + cX; 
    y = (x * pSin + y * pCos) + cY; 
    return {x: Math.floor(x), y: Math.floor(y)}; 
} 

這裏有一個jsbin of the weird result

Answer 1

的功能幾乎是正確的，但你只是用修改後的x值來計算Ÿ

function rotate(point, center, angle) { 
    var theta = (Math.PI/180) * angle, 
     cX = center.pos.x, 
     cY = center.pos.y, 
     pX = point.pos.x, 
     pY = point.pos.y, 
     pCos = Math.cos(theta), 
     pSin = Math.sin(theta), 
     x = pX - cX, 
     y = pY - cY; 
    /* You had 
    x = (x * pCos - y * pSin) + cX; // you change x on this line 
    y = (x * pSin + y * pCos) + cY; /// then used the modified x to get y 
    */ 
    // this will fix the problem 
    var xx = (x * pCos - y * pSin) + cX; 
    var yy = (x * pSin + y * pCos) + cY; 
    return {x: Math.floor(xx), y: Math.floor(yy)}; 
}