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

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 + pivotX, y + pivotY)位置。将矢量从红色枢轴点指向绿色枢轴点，即

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;