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

【问题标题】：rotate command translates rect to another position processing旋转命令将矩形转换为另一个位置处理
【发布时间】：2020-11-30 21:04:47
【问题描述】：

我在处理过程中将 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，则矩形会旋转并平移到另一个位置。如何解决这个问题？

【问题讨论】：

标签： javascript animation rotation processing rect

【解决方案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();

【讨论】：