使用边界框坐标计算旋转矩形变换

Question

我有一个旋转了 -13 degrees 的红色容器，在这个容器内有一个也旋转了 -13 degrees 的粉色方块。

仅使用下面的这些信息，我试图找到相对于原点（顶部、左侧）的 pink square 变换 (0,0)

相对变换坐标是我需要在父对象内部平移多少。边界框只是包含旋转的大小（它是屏幕截图中的黑框）

粉色方块

size before rotation
height : 398
width : 398

size after rotation
height : 477
width : 477

Bounding box
x : 179
y : 230

Relative transform to parent
x : 0
y : 49

Rotation 

-13 deg

红色容器

size before rotation
height : 632
width : 447

size after rotation
height : 716
width : 577

Bounding box
x : 179
y : 182.28

Relative transform to parent
x : 279
y : 182

Rotation 

-13 deg

这是我尝试做的

yCoordinate = pink.relativeTransform.y + redContainer.boundingBox.y
xCoordinate = pink.relativeTransform.x + redContainer.boundingBox.x

我设法获得了正确的 y 坐标，但我无法获得 x 坐标，我担心这对所有角度都适用

Answer 1

如果您将变换表示为矩阵，您将很容易得到答案（请注意，我将使用 transform 一词来表示整个变换，包括旋转，而不是只是偏移向量）。顺便说一句，你的图像显示正向旋转（在数学意义上），所以我假设它实际上是 +13°.

要获得旋转角度 phi 和偏移向量 (tx, ty) 的变换矩阵，我们可以采用以下形式：

    / cos(phi)  -sin(phi)  tx \
T = | sin(phi)   cos(phi)  ty |
    \    0           0      1 /

因此，红色矩形相对于原点的变换为：

       / 0.974  -0.225  279 \
TRed = | 0.225   0.974  182 |
       \   0       0     1  /

粉红色方块相对于红色矩形的变换是（没有相对于父级的旋转，只是平移）：

        / 1 0  0 \
TPink = | 0 1 49 |
        \ 0 0  1 /

为了得到粉红色方块相对于原点的变换，我们只需将两个矩阵相乘：

               / 0.974  0.225  267.977 \
TRed * TPink = | 0.225  0.974  229.744 |
               \   0      0      1     /

我们可以看到第一部分与TRed中的旋转相同，即旋转了13°。翻译（这是您要查找的向量）是 (267.977, 229.744).

一般来说，这个翻译向量是：

/  cos(phi) * tPinkX - sin(phi) * tPinkY + tRedX \
\  sin(phi) * tPinkX + cos(phi) * tPinkY + tRedY /

使用边界框坐标计算旋转矩形变换

Calculate rotated rectangle transform using bounding box coordinates

math

geometry

rotation

bounding-box

coordinate-transformation