根据另一个矩形的旋转移动矩形的位置

Question

我有两个带枢轴的矩形，

我需要根据红色矩形的旋转来附加绿色矩形的位置

结果应该如图所示：

我尝试了不同的公式，但没有成功

红色矩形:

x=500, y=100, width=200, height=500, pivotX=100, pivotY=400

绿色矩形：

x=450, y=150, width=100, height=400, pivotX=50, pivotY=50

我尝试了这样的方法：

var radians = (Math.PI / 180) * red.degree;
green.x += red.pivotX * Math.cos(radians) - red.pivotY * Math.sin(radians);
green.y += red.pivotX * Math.sin(radians) + red.pivotY * Math.cos(radians);

非常感谢所有帮助过我的人！

Answer 1

矩形的枢轴最初位于位置（x 透视 X，y 透视 Y）。取从红色枢轴点指向绿色枢轴点的矢量，即

vx = green.x + green.pivotX - red.x - red.pivotX;
vy = green.y + green.pivotY - red.y - red.pivotY;

这就是你旋转的向量：

wx = Math.cos(radians)*vx - Math.sin(radians)*vy;
wy = Math.sin(radians)*vx + Math.cos(radians)*vy;

然后，您可以使用旋转的 w 而不是原始的 v 来确定绿色矩形的位置：

green.x += wx - vx;
green.y += wy - vy;