processing - 了解处理中的 void draw()

Question

我正在修补处理，无法弄清楚如何在我使用图像缓冲区(旋转方 block )创建的图像上写入文本...当方 block 变得小于文本时，变化的数字会写在彼此之上.不能使用重置 bkg 作为解决方案，因为这会删除重叠的图像。仍然很难理解这个领域......

问题:如何在不重置 bkg 且文本不覆盖自身的情况下让文本出现在旋转正方形的顶部

代码如下谢谢!

float rotateAmount;
int boxColorR = 255;
int boxColorG = 255;
int boxColorB = 255;
int boxW = 480;
void setup () {
  size(640,480);
  rectMode(CENTER);

}

void drawText() {
  //translate(width/2,height/2);
  textAlign(LEFT, CENTER);
  fill(255, 255, 255);
  textSize(32);
  text("RED: " + boxColorR,width/2,height/2);
  text("GREEN: " + boxColorG,width/2,height/2+30);
  text("BLUE: " + boxColorB,width/2,height/2+60);
  text("Box Width: " + boxW,width/2,height/2+90); 
}

void drawBox() {
  translate(width/2,height/2);
    rotateAmount += 12;
    if (boxColorR <= 0) {
    boxColorG--;
  }
    if (boxColorG <= 0) {
    boxColorB--;
  }
  boxColorR--;
  boxW--;
  rotateAmount += .05;
  rotate(rotateAmount);
  fill(boxColorR,boxColorG,boxColorB);
  rect(0,0,boxW,boxW);
  resetMatrix();

}



void draw() {
    //rect(width/2,height/2,640,480); //this solves the text overlapping but erases the cool effect
    drawBox();
    drawText();

}

Answer 1

大多数处理草图使用对 background() 函数的调用作为 draw() 函数中的第一行。这会清除之前帧中绘制的所有内容。

但是，您希望保留之前帧中绘制的内容，因此您不想清除它们。这样做的问题是，由于您的文本也没有被清除，因此您的文本最终看起来是乱码。

解决方案是使用 PGraphics 类创建离屏缓冲区。您将方 block 绘制到缓冲区而不是屏幕。然后将缓冲区绘制到屏幕上，最后在缓冲区顶部绘制文本。

由于您在每一帧都将缓冲区绘制到屏幕上，它会清除旧文本，但您之前绘制的正方形会保留在缓冲区中。

代码胜于 Eloquent :

float rotateAmount;
int boxColorR = 255;
int boxColorG = 255;
int boxColorB = 255;
int boxW = 480;

//create a buffer to draw boxes to
PGraphics buffer;

void setup () {
  size(640, 480);

  buffer = createGraphics(640, 480);
}

void drawText() {
  //translate(width/2,height/2);
  textAlign(LEFT, CENTER);
  fill(255, 255, 255);
  textSize(32);
  text("RED: " + boxColorR, width/2, height/2);
  text("GREEN: " + boxColorG, width/2, height/2+30);
  text("BLUE: " + boxColorB, width/2, height/2+60);
  text("Box Width: " + boxW, width/2, height/2+90);
}

//draw boxes to buffer
void drawBox() {

  buffer.beginDraw();
  buffer.rectMode(CENTER);

  buffer.translate(width/2, height/2);
  rotateAmount += 12;
  if (boxColorR <= 0) {
    boxColorG--;
  }
  if (boxColorG <= 0) {
    boxColorB--;
  }
  boxColorR--;
  boxW--;
  rotateAmount += .05;
  buffer.rotate(rotateAmount);
  buffer.fill(boxColorR, boxColorG, boxColorB);
  buffer.rect(0, 0, boxW, boxW);
  buffer.resetMatrix();

  buffer.endDraw();
}

void draw() {

  //draw the boxes to the buffer
  drawBox();
  //draw the buffer to the screen
  image(buffer, 0, 0);

  //draw the text on top of the buffer
  drawText();
}