PGraphics似乎在绘制到主上下文时被清除或冻结

Question

我的最终目标是创建一个“隧道效果”，因为我将一个rect绘制到一个缓冲区，将该缓冲区复制到另一个缓冲区，在随后的draw（）中，将第二个缓冲区复制回第一个缓冲区，只是稍微小一点，然后在该缓冲区上绘制并重复。

我完全被这里发生的事情难倒了。

PGraphics canvas;
PGraphics buffer;

void setup(){
  size(500, 500);
  canvas = createGraphics(width, height);
  buffer = createGraphics(canvas.width, canvas.height);

  canvas.beginDraw();
  canvas.background(255);
  canvas.noFill();
  canvas.stroke(0);
  canvas.rect(100 + random(-50, 50), 100 + random(-50, 50), 350 + random(-50, 50), 350 + random(-50, 50));
  canvas.endDraw();

  buffer.beginDraw();
  buffer.image(canvas, 0, 0);
  buffer.endDraw();

  canvas.beginDraw();
  canvas.image(buffer, 100, 100, width-200, height-200);
  canvas.endDraw();

  image(canvas, 0, 0);

  noLoop();
}

这是一个非常愚蠢的示例，但它证明了这个概念是正确的：我绘制到画布，复制到缓冲区，将缓冲区复制回画布，然后输出到主上下文。

但是看看当我在draw（）循环中尝试这样做时会发生什么：

PGraphics canvas;
PGraphics buffer;

void setup(){
  size(500, 500);
  canvas = createGraphics(width, height);
  buffer = createGraphics(canvas.width, canvas.height);

  canvas.beginDraw();
  canvas.background(255);
  canvas.noFill();
  canvas.stroke(0);
  canvas.rect(100 + random(-50, 50), 100 + random(-50, 50), 350 + random(-50, 50), 350 + random(-50, 50));
  canvas.endDraw();

  buffer.beginDraw();
  buffer.image(canvas, 0, 0);
  buffer.endDraw();
}

void draw(){
  canvas.beginDraw();
  canvas.image(buffer, 0, 0);
  canvas.rect(100 + random(-50, 50), 100 + random(-50, 50), 350 + random(-50, 50), 350 + random(-50, 50));
  canvas.endDraw();

  image(canvas, 0, 0);

  buffer.beginDraw();
  buffer.image(canvas, 0, 0);
  buffer.endDraw();
}

在这里，最终发生的是，在setup（）中创建的原始rect每帧都被复制到canvas。因此，效果是有一个不移动的rect，然后第二个rect被绘制和替换每一帧。

PGraphics canvas;
PGraphics buffer;

void setup(){
  size(500, 500);
  canvas = createGraphics(width, height);
  buffer = createGraphics(canvas.width, canvas.height);

  canvas.beginDraw();
  canvas.background(255);
  canvas.noFill();
  canvas.stroke(0);
  canvas.rect(100 + random(-50, 50), 100 + random(-50, 50), 350 + random(-50, 50), 350 + random(-50, 50));
  canvas.endDraw();

  buffer.beginDraw();
  buffer.image(canvas, 0, 0);
  buffer.endDraw();
}

void draw(){
  canvas.beginDraw();
  canvas.image(buffer, 0, 0);
  canvas.rect(100 + random(-50, 50), 100 + random(-50, 50), 350 + random(-50, 50), 350 + random(-50, 50));
  canvas.endDraw();

  buffer.beginDraw();
  buffer.image(canvas, 0, 0);
  buffer.endDraw();

  image(canvas, 0, 0);
}

image(buffer, 0, 0);

相反，它回到了以前的“冻结”缓冲区的行为，但每次都在它上面画一个新的rect。

有人能解释一下正在发生的事情吗？

Answer 1

具体考虑一下每个pgraphics图像中的内容。

每个pgraphics都是一个带有白色背景和黑色矩形的500x500图像。

然后你把一个图像画在另一个图像上。它们仍然都是白色的图像，上面有一个黑色的矩形。重要的是要注意的是，因为他们都有白色背景，你将不能看到“旧”的图像“通过”新的。所以你只是来回画同一个矩形。

我还将注意到，通过对主画布进行同样的操作，您可能只需要将单个缓冲区图像越画越小，甚至根本不需要缓冲区图像，就可以实现这种效果。