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

发布于 2024-11-10 02:53:44 字数 174 浏览 0 评论 0 原文

我认为我只是让这个变得过于复杂，但我有一个矩形，我试图使用旋转值来绘制。我有所有四个顶点的坐标，并且我需要顺时针旋转 X 度时的新坐标。

编辑：需要注意的一件事是，我在 HTML5 画布上绘图，因此坐标系有点不同。 X和Y总是> 0 且 Y 的增加向下进行。

有什么想法吗？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温折酒 2024-11-17 02:53:44

因此，您真正需要的是一个接受点、原点（在本例中为矩形的中心）和角度的函数：

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,10 度 45 度（比如说）20,20，你会这样做： rotatePoint({x:10, y:10}, {x:20, y:20}, 45) 会给你 (20, 5.85），等等。

So all you really need is a function that takes a point, an origin (the center of your rectangle in this case) and an angle:

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

So if you wanted to rotate a vertex at 10,10 by 45 deggrees about the center which is (say) 20,20, you would do: rotatePoint({x:10, y:10}, {x:20, y:20}, 45) would give you (20, 5.85), and so on.