改变加工中形状的旋转中心

Question

我正在尝试旋转我在 Illustrator 中使用处理创建的矢量。我希望它从它的中心旋转这个矢量，所以它看起来像在旋转而不是绕着一个不可见的点移动。以下是我的尝试：

PShape WOE;

void setup(){
    WOE = loadShape("WOE.svg");
    size (500, 500);
    smooth();
}

void draw(){
  background(20);
  shape(WOE, width/2, height/2, WOE.width, WOE.height); //draw shape in "center" of canvas (250, 250)
  translate(-WOE.width/2, -WOE.height/2); //move shape so that center of shape is aligned with 250, 250
  WOE.rotate(0.01);
}

从严格的逻辑角度来看，这应该有效，但是这会导致矢量围绕 canvas 的中心旋转，但距离大约 100px。我曾尝试使用 shapeMode(CENTER);，但不幸的是，这没有任何改善。希望有人能帮忙，谢谢！

供参考 这是 WOE.svg：https://www.dropbox.com/s/jp02yyfcrrnep93/WOE.svg?dl=0

Answer 1

我认为你的部分问题是你在混合旋转形状和平移整个草图。我会尝试坚持其中一个：平移和旋转整个草图，或者只平移和旋转形状。

话虽如此，这给您带来麻烦并不奇怪。

我会期待这个工作：

PShape WOE;

void setup() {
  size (500, 500);

  WOE = loadShape("WOE.svg");
  WOE.translate(-WOE.width/2, -WOE.height/2);
}

void draw() {
  background(20);
  WOE.rotate(.01);
  shape(WOE, width/2, height/2);
}

但是，这表现出与您注意到的相同的 off-center 行为。但是如果我切换到 P2D 渲染器，它工作正常！

size (500, 500, P2D);

现在形状以 window 为中心并围绕形状的中心旋转。渲染器之间的差异似乎有问题，但我在 GitHub 上找不到未解决的错误。 编辑： 我发现 SO question, which lead to this GitHub 问题。

无论如何，旋转整个草图而不是形状可能更容易：

PShape WOE;
float rotation = 0;

void setup() {
  size (500, 500);

  WOE = loadShape("WOE.svg");
  shapeMode(CENTER);
}

void draw() {
  background(20);

  translate(width/2, height/2);
  rotate(rotation);
  shape(WOE);

  rotation += .01;
}

此代码的工作原理是将整个草图平移到 window 的中心，然后旋转整个草图，然后绘制形状。把这想象成移动相机而不是移动形状。如果你有其他东西要画，那么你可以使用 pushMatrix() 和 popMatrix() 函数来隔离转换。这在默认渲染器和 P2D 渲染器中工作相同。

改变加工中形状的旋转中心

changing center of rotation for a shape in processing

processing