Question

所以我承认我真的不知道怎么说这个问题。但是一个完整的解释应该有助于揭示一些亮点这就是我所知道的。我在HTML5 Canvas上绘制了一个rectanlge。我知道所有4个角的点和宽度和高度。从这个我可以计算出中点。我想知道的是，如果我旋转矩形n degress，新点将是什么。所以例如我想从中心点旋转45度。四角的新顶点是什么？希望这能完全解释我在寻找什么。代码示例，最好是在JavaScript中，会很棒。提前致谢。

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

将度数转换为randians：

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

旋转后查找矩形的顶点

1 个答案: