Javascript 基于另一个矩形的旋转移动矩形的位置

我有两个带枢轴的矩形

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

结果应如图所示：

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

红色矩形：

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

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

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

绿色矩形：

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

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

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

我试过这样的方法：

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);

---

非常感谢所有帮助过你的人

矩形的轴最初位于位置

（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

来确定绿色矩形的位置：

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

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

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

---

我认为你还必须对绿色矩形与红色矩形相连的点进行建模。还不清楚各个位置与枢轴的关系。谢谢，这正是我想要的needed@user1732451当前位置SO在投票系统中起作用，因此，如果您认为答案有用，请务必投赞成票。接受答案是一个好的开始。