javascript - (未)旋转矩形上的点

Question

我找到了 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< 的已知值计算目标 x'/y'(绿色圆圈)的位置(红圈)、中心 x/y(蓝星)和 度数/弧度。

但我需要数学/代码来解决图 B；我不仅可以找到目的地 x/y(绿色圆圈)，还可以找到目的地 center x/y(绿色星号)起始 x/y 的已知值(灰色圆圈，虽然可能不需要)，目标 x'/y' (红色圆圈)和 度数/弧度。

上面的代码将通过 iDegrees * -1 求解目标 x/y(绿色圆圈)(感谢@andrew cooke答案已被他删除)，但为了做到这一点，我需要将目的地 center x/y(绿色星号)的位置输入其中，这就是我的计算结果m 目前缺失，如下图 C 所示:

那么...如何找到坐标 ?/?(绿色星号)，给定 n，A( Angular )和x'/y'(红圈)？

Answer 1

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

在您目前的情况下，您通过 Angular 获得旋转，但您需要计算平移。您将需要您认为不需要的灰色圆圈。将旋转 R(不是它的逆)应用到灰色圆圈。从红色圆圈中减去这一点。这是原来的翻译T。将符号反转得到T^-1。