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

Question

我有一个旋转了-13 degrees的红色容器，在该容器中有一个旋转了-13 degrees的粉红色正方形。

仅在下面使用这些信息，我试图找到相对于原点（上，左）pink square的{​​{1}}变换

相对转换坐标是我需要在父级内部进行转换的量。边界框就是包含旋转的大小（它是屏幕截图上的黑框）

粉红广场

(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，但是我也无法获得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 /