將矩形的頂點轉換爲不以原點爲中心

Question

我認爲我只是過度複雜化了這一點，但我有一個矩形，我試圖使用旋轉值進行繪製。我有所有四個頂點的座標，當順時針旋轉X度時，我需要新的座標。

編輯：有一點需要注意，我在HTML5畫布上繪製，所以座標系有點不同。 X和Y始終> 0，而Y增加向下。

任何想法？

感謝

Answer 1

因此，所有你真正需要的是一個函數，它接受一個點，原點（您的矩形在這種情況下，中心）和角度：

function rotatePoint(p, origin, angle) { 
    if (angle === 0) return p; 
    // make the origin essentially zero: 
    var px = p.x - origin.x; 
    var py = p.y - origin.y; 
    if (px == 0 && py == 0) return p; 
    var rad = angle * Math.PI/180; 
    var cosine = Math.cos(rad); 
    var sine = Math.sin(rad); 
    p.x = cosine * px - sine * py; 
    p.y = sine * px + cosine * py; 
    // put the point back: 
    p.x += origin.x; 
    p.y += origin.y; 
    return p; 
}; 

所以，如果你想以10,20爲中心旋轉一個頂點45度（比如說20,20），你應該這樣做：rotatePoint({x:10, y:10}, {x:20, y:20}, 45)會給你(20, 5.85)，依此類推。