如何围绕任意点旋转一组二维形状

Question

我正在制作一个“身体”类，它将一堆 2D 形状组合在一起以形成一个可移动、可旋转的身体。

我需要知道的是如何旋转每个单独的形状，使其看起来像整个身体在旋转，而不是每个形状都围绕它的中心进行自己的旋转。 我不能只是将每个形状的旋转中心更改为同一点，因为这也会导致它们的位置受到影响。

因此，我需要找到某种方程式，使用 body center 重新定位和重新旋转身体中的每个单独的形状，以保持身体形状不变形?

我该怎么做？

Answer 1

任意点旋转的方法是先减去点坐标，绕原点旋转，再加上点坐标。

x2 = px + (x1-px)*cos(q)-(y1-py)*sin(q)
y2 = py + (x1-px)*sin(q)+(y1-py)*cos(q)

其中px, py 是旋转点坐标，x1,y1 是原始二维形状顶点，x2,y2 是旋转坐标，q 是弧度角。

Answer 2

我假设您用笛卡尔坐标 (x,y) 表示点，并且您对向量的基本概念很熟悉。

要围绕原点 (0,0) 将单个点旋转给定角度 θ，我们将其变换如下：

x' = x cos(θ) - y sin(θ)
y' = x sin(θ) + y cos(θ)

或向量矩阵形式：

X' = M(θ) X

（如果你不熟悉向量矩阵的东西，我可以把它拼出来。）

要围绕点 B 旋转点 X，请执行以下操作：

X' = B + M(θ) (X - B)

要将整个 Body 围绕其中心 B 旋转 θ，只需将每个形状的中心围绕 B 旋转 θ，然后将每个形状围绕其自身中心旋转 θ (您可以按任何顺序执行这些步骤）。

Answer 3

您需要的是转换层次结构。本质上，一直在 3D 中完成的事情，只有您使用 2D 数学。所以不是 4x4 仿射矩阵，而是 3x3 仿射矩阵。

每个单独的形状都需要进行局部变换。自身围绕其中心的旋转（相对于中性旋转），以及自身相对于其父对象到该中心点的平移。您将此转换构建为 3x3 矩阵。

您需要对象的层次结构：一棵树。您的“身体”是树中的一个节点。它有子节点：两条大腿、两条上臂和一个头。小时候每条上肢都有一条小腿，就像小时候每条上臂都有一条下臂一样。以此类推。

因此，当需要绘制所有内容时，您会累积矩阵。你得到身体的变换矩阵，用它变换身体，然后渲染它。然后你得到身体的每个孩子，将它的变换乘以它的父母，用那个新的矩阵变换那个形状，然后渲染它。然后，对于其中的每一个，重复该过程：获取父矩阵，将其局部矩阵应用于该父矩阵，通过新矩阵转换对象，然后渲染它。递归遍历对象的整个层次结构。

真的，理解这一点的最好方法是看看 3D 渲染器是如何做到的。 2D 渲染只是这种情况的一个特例，您只能围绕 Z 旋转并且只有 2D 平移。