旋转矩形后找到其顶点

Question

我承认我不知道如何表达这个问题，但是一个完整的解释应该会有所帮助。以下是我所知道的：我在HTML5画布上绘制了一个矩形，我知道所有4个角的点和宽度和高度。从这里我可以计算中点。我想知道的是，如果我将矩形旋转n度，新的点将是什么。例如，我想让它从中心点旋转45度。那么四个角的新顶点会是什么？希望这完全解释了我所寻找的内容。最好用JavaScript编写代码示例。谢谢。

- selanac82

Answer 1

该函数计算所需内容。 `pivot' 是旋转的起点（在您的情况下为矩形的中心）。

function rotatePoint(pivot, point, angle) {
  // Rotate clockwise, angle in radians
  var x = Math.round((Math.cos(angle) * (point[0] - pivot[0])) -
                     (Math.sin(angle) * (point[1] - pivot[1])) +
                     pivot[0]),
      y = Math.round((Math.sin(angle) * (point[0] - pivot[0])) +
                     (Math.cos(angle) * (point[1] - pivot[1])) +
                     pivot[1]);
  return [x, y];
};

将度数转换为弧度：

function degToRad(deg) {
  return deg * Math.PI / 180;
}

- sabof

---

你需要使用这个4次，point是矩形的四个角。它是用弧度表示的。我马上会添加一个转换函数。 - sabof

你能提供相同的内容给我吗？ - Jay Thakkar