处理3个离屏丑陋的元素

Question

我可以帮助您将Processing 3（和2）应用于OSX和Windows。在离屏PGraphics缓冲区中的线性图形比直接绘制的线条要丑陋得多。似乎边缘处的抗锯齿效果不太好。您需要我帮助让离屏缓冲区图形更加美观吗？

示例图片（右侧为难看的离屏，左侧为屏幕上的）：
示例代码

PGraphics pg;

void setup(){
  size (1024,768, P2D);
  pixelDensity(2);
  smooth();
  pg = createGraphics(width, height, P2D);
  noLoop();
}

void draw(){
  background (0);
  pushMatrix();
  translate (width/2-100, height/2);
  rotate (PI/6);
  stroke(255);
  noFill();
  strokeWeight(0.5);
  rect (0,0,100,100);
  popMatrix();

  pg.beginDraw();
  pg.smooth();
  pg.clear();
  pg.translate (width/2+100, height/2);
  pg.rotate (PI/6);
  pg.stroke(255);
  pg.noFill();
  pg.strokeWeight(0.5);
  pg.rect (0,0,100,100);
  pg.endDraw();

  image(pg,0,0, width, height);

  save("shot.png");
}

谢谢！

这个问题也在Processing论坛这里发表了。

- janper

---

请在交叉帖子之间添加链接：https://forum.processing.org/two/discussion/13355/offscreen-pgraphics-is-ugly - Kevin Workman

Answer 1

问题是由于Processing默认启用了反锯齿功能所致。您可以通过调用smooth()函数显式启用它，但请注意，这是多余的，因为它已经被默认启用了。

这会导致您的线条在它们自己的颜色和背景颜色之间产生“模糊”。在屏幕缓冲区中，该背景颜色为黑色。在离屏缓冲区中，该背景颜色为透明色。这就是为什么您的离屏正方形看起来更透明-因为它确实是透明的。

要解决此问题，您需要通过调用noSmooth()来禁用反锯齿功能，或者确保您绘制到相同的背景颜色。以下是使用noSmooth()方法的示例：

PGraphics pg;

void setup(){
  size (1024,768, P2D);
  noSmooth();
  pg = createGraphics(width, height, P2D);
  noLoop();
}

void draw(){
  background (0);
  pushMatrix();
  translate (width/2-100, height/2);
  rotate (PI/6);
  stroke(255);
  noFill();
  strokeWeight(0.5);
  rect (0,0,100,100);
  popMatrix();

  pg.beginDraw();
  pg.noSmooth();
  pg.clear();
  pg.translate (width/2+100, height/2);
  pg.rotate (PI/6);
  pg.stroke(255);
  pg.noFill();
  pg.strokeWeight(0.5);
  pg.rect (0,0,100,100);
  pg.endDraw();

  image(pg,0,0, width, height);

}

- Kevin Workman