围绕它的中心点

Question

我的问题如下。我想围绕其中心点旋转网格，但到目前为止我可以围绕 canvas 的中心点旋转它。我尝试了各种设置，但其中 none 带来了预期的结果。到目前为止，我只设法围绕 canvas 的中心点旋转网格，这不是我想要的。请帮忙。我是初学者 在 p5js 中，因此任何反馈都会被预先处理。

Answer 1

要围绕轴心旋转图像，您必须：

• "move" 原点 (0, 0) 的支点。
  这意味着您必须按 (-width / 2, -height / 2)
进行翻译
• 旋转图像
• "move"枢轴回到原来的位置
  这意味着您必须按 (width / 2, height / 2)
进行翻译

由于像translate and rotate这样的操作定义了一个矩阵并将当前矩阵乘以新矩阵，因此必须以相反的顺序执行此操作：

push();

translate(width / 2, height / 2);
rotate(PI / 180 * 45);
translate(-width / 2, -height / 2);

imageMode(CENTER);
rectMode(CENTER);
layerOne.grid.display();
pop();