用于数组中的循环绘制PGraphics [处理]

Question

我试着用处理来构建一个绘图程序。目前，我一直在使用PGrapchics。

当用户绘制矩形时，它会显示正在绘制的形状。当用户释放鼠标时，它会创建一个最终形状的PGraphic。然后，我希望用户能够在此基础上进行绘图。我的问题是：

我不得不在绘制矩形时重置画布的背景，因为否则，它会显示矩形的轨迹。结果是，当用户绘制一个新的矩形时，旧的矩形消失并在鼠标被释放后返回。

一些想法:我也想添加一些功能，用户可以在以前绘制的矩形上进行选择，并改变它的颜色、笔画、发送到后面、带到前面等。

为了实现这一点，我将所有绘制的矩形(PGraphics)存储到一个ArrayList中，该ArrayList将通过一个for循环绘制。这将允许我通过将PGraphics元素上下移动ArrayList来调整行为。

PS:与其创建我自己的Shape类，不如使用PShape吧？

int startX;
int startY;
int endX;
int endY;
boolean drawing;
int strokeW = 3;
Shape shape;

PGraphics shapeLayer; 
ArrayList<PGraphics> layersList = new ArrayList();

void setup() {
  size(500, 500);
  cursor(CROSS);
  background(255);
  smooth();
}

void draw() {
  strokeWeight(strokeW);
  if (key >= '0' && key <= '9') {
    strokeW = key - '0';
  }
  for(int i = 0; i < layersList.size(); i++) {
    image(layersList.get(i), 0, 0);
  }
  if (drawing) {
    shape.createRectangle();
  }
}


void mousePressed() {
  startX = mouseX;
  startY = mouseY;

  shapeLayer = createGraphics(width, height);
  shapeLayer.beginDraw();
}  

void mouseDragged() {
  drawing = true;
  endX = constrain(mouseX, 0, 500);
  endY = constrain(mouseY, 0, 500); 

  shape = new Shape(startX, startY, endX, endY);
  shapeLayer.clear();
}

void mouseReleased() {
  drawing = false;
  shapeLayer.endDraw();
  layersList.add(shapeLayer);
}  

下面是Shape类：

class Shape {
  int startX;
  int startY;
  int endX;
  int endY;

  Shape(int x1, int y1, int x2, int y2) {
    startX = x1;
    startY = y1;
    endX = x2;
    endY = y2;
  }    

  void createRectangle() {
    background(255, 0);
    shapeLayer.strokeWeight(strokeW);
    shapeLayer.rectMode(CORNERS);
    shapeLayer.rect(startX, startY, endX, endY);  
    rectMode(CORNERS);
    rect(startX, startY, endX, endY);

  }

}  

Answer 1

今后，在发布之前，请尝试将您的问题缩小到MCVE。例如，您可以使用硬编码来在用户拖动时绘制一个矩形，而不是包含每个形状的所有代码。

但是，您的问题是由于绘制到屏幕上，而不是清除它。您需要把你的问题分解成更小的部分，然后逐个接近这些部分。

步骤1:可以创建一个草图，在拖动时只显示一个矩形，但当您松开鼠标时，矩形会消失吗？从一个基本的草图开始，只做这一件事，在你进入下一个步骤之前，让它完美地工作。

步骤2:可以将形状绘制到屏幕外的缓冲区中吗？看起来您已经在当前的代码中尝试过这一点，但是请注意，您从未实际将任何形状绘制到缓冲区，也从未实际将缓冲区绘制到屏幕上。同样，从一个基本的草图开始，它就是这样做的。甚至不要担心用户的输入或任何事情，只需将硬编码的矩形绘制到屏幕外缓冲区，然后将其绘制到屏幕上。

步骤3:当您正在绘制矩形时，可以将这两个矩形组合起来显示它，然后在用户放手时将其绘制到屏幕外缓冲区中吗？

步骤4:只有当矩形完美地工作时，才会移动到其他形状。

这就是编程的工作原理:你必须把你的问题分解成这样的小步骤，然后你必须孤立地对待每一个步骤。如果你被卡住了，你可以带着一个MCVE回来，只显示其中一个步骤，我们就从那里开始。祝好运。

Answer 2

除了Kevin的回答:看起来您确实使用了另一个PGraphics缓冲区来绘制，但是整个草图可能更简单。

除非您需要撤消/重做模式(需要记住绘图命令及其顺序)，否则您可以使用稍微简单一些的方法。

您可以找到一个显示类似内容的注释代码的详细回答。您只需添加铅笔和行模式。