将矩形的顶点转换为不以原点为中心

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)，依此类推。