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

【问题标题】：Calculate rotated rectangle transform using bounding box coordinates使用边界框坐标计算旋转矩形变换
【发布时间】：2019-01-05 18:55:18
【问题描述】：

我有一个由-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 坐标，我担心这适用于所有角度

【问题讨论】：

标签： math rotation geometry bounding-box coordinate-transformation

【解决方案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 /

【讨论】：