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

Question

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

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

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

粉红广场

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

我设法正确地设置了yCoordinate，但是我也无法获得x坐标，我担心这对所有角度都适用

Answer 1

如果将变换表示为矩阵，则将很容易获得答案（请注意，我将使用“ 变换 ”一词来表示整个变换，包括旋转，而不仅仅是偏移矢量）。 顺便说一句，您的图像显示了一个正方向的旋转（从数学意义上来说），因此我假设它实际上是+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 /