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

因此，如果你想围绕中心（例如20,20）以10,10度45度旋转一个顶点，你会这样做：rotatePoint({x:10, y:10}, {x:20, y:20}, 45)会给你(20, 5.85)，所以上。

变换矩形不是以原点为中心的顶点

1 个答案: