如何在 p5 JS 中正确旋转自定义形状并在不改变角度的情况下围绕 canvas 移动它？

Question

我一直在尝试使用 translate() 和 rotate() 旋转我用曲线顶点创建的自定义形状。我成功地旋转了形状，但是当我改变形状的位置时，它的角度也会改变，即我无法让整个形状在屏幕上完整移动。

我的函数形状代码是：

function custom_shape() {
  fill(180, 180, 180);
  beginShape();
  curveVertex(cShape_x - 12, cShape_y - 37); 
  curveVertex(cShape_x - 16, cShape_y - 48); 
  curveVertex(cShape_x - 19, cShape_y - 43); 
  curveVertex(cShape_x - 16, cShape_y - 29);
  endShape(CLOSE);
  }

我在setup函数中设置了angleMode(DEGREES)。要旋转我使用的形状：

push();
translate((cShape_x - 310), (cShape_y + 18));
rotate(-90);
custom_shape();
pop();

当我想更改 cShape_x 和 cShape_y 值时，我的问题出现了。在这种情况下，形状会改变其角度和相对于其他形状的位置（在更改 cShape_x 和 cShape_y 值时会正确转换）。

我找不到合适的在线资源。我发现这是最好的解释，但它仍然不适合我。 https://processing.org/tutorials/transform2d/

如有任何帮助，我们将不胜感激。

Answer 1

无需为 custom_shape() 中的每个单独点添加坐标。

function custom_shape() {
    fill(180, 180, 180);
    beginShape();
    curveVertex(-12, -37); 
    curveVertex(-16, -48); 
    curveVertex(-19, -43); 
    curveVertex(-16, -29);
    endShape(CLOSE);
}

仅在translate中使用cShape_x和cShape_y就足够了：

push();
translate((cShape_x - 310), (cShape_y + 18));
rotate(-90);
custom_shape();
pop();

如何在 p5 JS 中正确旋转自定义形状并在不改变角度的情况下围绕 canvas 移动它？

How to properly rotate a custom shape in p5 JS and move it around the canvas without changing its angle?

javascript

processing

p5.js