处理 - 以光标位置移动圆圈

Question

我制作了一个简单的绘图程序来绘制线条并增加/降低行的厚度：

float strokeWeight = 2;
void setup() {
  size(640, 360);
  noSmooth();
  fill(126);
  background(255);
  strokeWeight(strokeWeight);
}
void draw() {
  background(0);
  ellipse(mouseX, mouseY, strokeWeight/2, strokeWeight/2);
  background(255);
  if (mousePressed) {
    stroke(0);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  if (keyPressed) {
    if (key == '+') {
      strokeWeight = strokeWeight + 0.5;
      }
    if  (key == '-') {
      strokeWeight = strokeWeight - 0.5;
      }
     if (strokeWeight >= 0.5) {
      strokeWeight(strokeWeight);
     }
    }
}

现在，我想与光标移动一个圆圈，以指示线的当前厚度。我尝试了这样的事情：

ellipse(mouseX, mouseY, strokeWeight/2, strokeWeight/2)

但是，这样一来，它会一遍又一遍地绘制椭圆。有没有办法"擦除"之前制作的圆圈？

Answer 1

我不是100％确定我已经理解了您的问题，但是您可能想使用PGrahics，在一个您保留线上，另一个您绘制圆圈。

float strokeWeight = 2;
PGraphics canvas;
PGraphics thickness_circle;
void setup() {
  size(640, 360);
  canvas = createGraphics(width, height);
  thickness_circle = createGraphics(width, height);
  thickness_circle.beginDraw();
  thickness_circle.noFill();
  thickness_circle.strokeWeight(1);
  thickness_circle.stroke(255, 0, 0);
  thickness_circle.endDraw();
}
void draw() {
  background(255);
  if (keyPressed) {
    if (key == '+') {
      strokeWeight += 0.5;
    }
    if  (key == '-') {
      strokeWeight -= 0.5;
    }
    strokeWeight = strokeWeight >= 0.5 ? strokeWeight : 0.5;
  }
  if (mousePressed) {    
    canvas.beginDraw();
    canvas.strokeWeight(strokeWeight);
    canvas.line(mouseX, mouseY, pmouseX, pmouseY);
    canvas.endDraw();
  }
  image(canvas, 0, 0);
  thickness_circle.beginDraw();
  thickness_circle.clear();
  thickness_circle.ellipse(mouseX, mouseY, strokeWeight, strokeWeight);
  thickness_circle.endDraw();
  image(thickness_circle, 0, 0);
}