（非）旋轉矩形上的點

Question

我發現了這個很好的問答 ，以x / y （加上center x/y和degrees/radians ）開頭，並計算了旋轉到x' / y' 。 這種計算效果很好，但我想朝相反的方向運行； 從x' / y'和degrees/radians ，我想計算原始x / y和center x/y 。

(x', y') = new position
(xc, yc) = center point things rotate around
(x, y) = initial point
theta = counterclockwise rotation in radians (radians = degrees * Pi / 180)
dx = x - xc
dy = y - yc

x' = xc + dx cos(theta) - dy sin(theta)
y' = yc + dx sin(theta) + dy cos(theta)

或者，在JavaScript / jQuery中：

XYRotatesTo = function($element, iDegrees, iX, iY, iCenterXPercent, iCenterYPercent) {
    var oPos = $element.position(),
        iCenterX = ($element.outerWidth() * iCenterXPercent / 100),
        iCenterY = ($element.outerHeight() * iCenterYPercent / 100),
        iRadians = (iDegrees * Math.PI / 180),
        iDX = (oPos.left - iCenterX),
        iDY = (oPos.top - iCenterY)
    ;

    return {
        x: iCenterX + (iDX * Math.cos(iRadians)) - (iDY * Math.sin(iRadians)),
        y: iCenterY + (iDX * Math.sin(iRadians)) + (iDY * Math.cos(iRadians))
    };
};

上面的數學/代碼解決了圖A中的情況； 它基於x / y （紅色圓圈）， center x/y （藍色星號）和degrees/radians的已知值計算目標x' / y' （綠色圓圈）的center x/y 。

但是我需要數學/代碼來解決圖B。 從起始x / y （灰色圓圈，雖然可能不需要）的已知值中，我不僅可以找到目標x / y （綠色圓圈），而且可以找到目標center x/y （綠色星形） x' / y' （紅色圓圈）和degrees/radians 。

上面的代碼將通過iDegrees * -1解決目標x / y （綠色圓圈）（感謝@andrew cooke的答案，此后他已將其刪除），但是為此，我需要將其輸入位置目標center x/y （綠色星號）的center x/y ，這就是我當前所缺少的計算，如下面的圖C所示：

那么...我如何找到坐標? / ? （綠色星號）給定n ， A （角度）和x' / y' （紅色圓圈）？

Answer 1

您正在嘗試找到逆變換。 您從兩個線性變換（平移T和旋轉R）的組合開始。首先將R應用於向量x，然后將T應用於向量，因此表達式為y = TRx。 要解決反問題，您需要TR的逆，寫為（TR） ^-1 ，它等於R ^-1 T ^-1 。 旋轉R的倒數就是旋轉角度的負數（您提到）。 類似地，轉換的逆是原始轉換乘以-1。 因此，您的答案是x = R ^-1 T ^-1 y。

在當前情況下，可以通過角度來獲得旋轉，但是需要計算平移。 您將需要一個灰色的圓圈，這是您認為不需要的。 將旋轉R（不是其倒數）應用於灰色圓圈。 從紅色圓圈中減去該點。 這是原始譯文T。反轉符號以獲得T ^-1 。