（未）旋转矩形上的点答案

【问题标题】：Points on a (un)rotated rectangle（未）旋转矩形上的点
【发布时间】：2012-05-17 11:48:40
【问题描述】：

我发现this excellent question and answer 以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'（绿圈）的位置。

但我需要数学/代码来解决图 B；我不仅可以找到目的地x/y（绿色圆圈），还可以从起始x/y（灰色圆圈）的已知值中找到目的地center x/y（绿色星号）可能不需要），目的地x'/y'（红色圆圈）和degrees/radians。

上面的代码将通过iDegrees * -1 解决目的地x/y（绿色圆圈）（感谢@andrew cooke 的回答，该回答已被他删除），但为了做到这一点，我需要将目的地center x/y（绿色星号）的位置输入其中，这就是我目前缺少的计算，如下图C所示：

那么...我如何找到给定n、A（角度）和x'/y'（红色圆圈）的坐标?/?（绿色星号）？

【问题讨论】：

标签： javascript algorithm geometry bounding-box

【解决方案1】：

您正试图找到一个逆变换。您从两个线性变换的组合开始，一个平移 T 和一个旋转 R。您首先将 R 应用于向量 x，然后将 T 应用于向量，因此表达式为 y = TRx。要解决逆问题，您需要 TR 的逆，写成 (TR)^-1，它等于 R^-1T^-1 .旋转 R 的倒数只是角度的负值（你提到的）的旋转。类似地，翻译的倒数是原始翻译乘以 -1。所以你的答案是 x = R^-1T^-1y。

在您目前的情况下，您通过角度获得旋转，但您需要计算平移。您将需要灰色圆圈，您认为自己不需要。将旋转 R（不是它的倒数）应用于灰色圆圈。从红色圆圈中减去这一点。这是原译T。将符号倒转得到T^-1。

【讨论】：