javascript - 旋转命令将矩形转换为另一个位置处理

Question

我在处理中将 rect 旋转了 35。这是我的代码。

pushMatrix();
rotate(35);
stroke(74, 73, 74);
fill(156, 153, 153);
rect(cannon1PositionX,cannon1PositionY,25,60,50);
noStroke();
fill(173, 168, 173);
rect(cannon1PositionX + 3,cannon1PositionY + 4,20,50,50);
popMatrix();

但是，如果我将旋转更改为 40，则矩形会旋转并平移到另一个位置。如何解决这个问题？

标签： javascriptanimationrotationprocessingrect

Answer 1

您的问题是，当您第一次使用时，rotate()您会参考整个画布进行旋转，因此当您使用 时canon1PositionX，cannon1PositionY根据您当前面对画布的角度，位置会发生变化。

您需要做的是：

pushMatrix();
// Go to the cannon position
translate(cannon1PositionX, cannon1PositionY);
// Rotate to the right angle
rotate(35);
// Draw the cannon at the current position and with the right angle
rect(0, 0, 25, 60, 50);
// Draw the second cannon next to the current one
rect(3, 4, 20, 50, 50);
popMatrix();