从任何点旋转矩形

时间:2013-05-06 09:14:10

标签: javascript rotation trigonometry rectangles

我正在尝试在Virtual Table Top程序的API中编写脚本(javascript),以便操作一些令牌(Car Wars :)。

我有点找到了答案,但似乎我正在努力并重新发明轮子,所以我想我会寻求帮助。我感到困惑的一个原因是程序返回结果基于+ y下降,Deg顺时针顺时针方向不同于所有三角公式所需(逆时针方向和+ y上方)。

以下是我可以访问的内容。矩形围绕中心,中心点(x,y),宽度,高度和旋转旋转。我已经有了代码用于在旋转方向上移动矩形,从一侧到另一侧,上下移动等等。现在我需要能够围绕四个角中的任何一个旋转它,否则任何一点都会很好,但是需要四个角落。

我不会让我包含一张图片,因为我是新手,所以我希望这些描述足够好。我有一张图片全部完成了。 :(

在API中我实际上无法绘制矩形,我只能设置其旋转和中心值。所以我的想法是,如果我能找到当前一个角的x,y,然后围绕中心旋转所需的凹痕(我可以通过设置矩形旋转轻松完成),找到同一个角的新x,y。然后我将知道偏移量并将其应用于中心(这也就是矩形的移动方式)。

所以我需要能够在任何给定的起始角度找到矩形的任何角落的x,y,然后再以在其中心旋转的新角度找到。然后,这个偏移很容易应用到中心x,y,并且矩形看起来沿着它的一个角旋转。

感谢您提供任何帮助。我希望我最终能弄明白,只是写出这个描述实际上已帮助我思考。但我现在卡住了!

康拉德

1 个答案:

答案 0 :(得分:1)

围绕2d中的任意点(例如,矩形的四个角之一)旋转的技巧是首先平移形状的顶点,使得您想要旋转的点位于原点(即0,0)。

实现这一点:
 1.用(-x,-y)翻译你的矩形  2.将矩形旋转所需的角度  3.用(x,y)平移矩形,使其回到原来的位置 其中(x,y)是要旋转的点的x / y坐标。

您可以使用负角度来调整顺时针旋转。

网上有很多关于此的信息,例如: http://www.siggraph.org/education/materials/HyperGraph/modeling/mod_tran/2drota.htm