使用邊界框坐標計算旋轉的矩形變換

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 /