如何在不使用背景的情况下删除形状（255）；

Question

我试图让 drawRedlines 函数在 mousePressed 函数和 mouseReleased 函数中出现和消失。我试过使用 background(255);在我的 mouseReleased 中，但由于某种原因它也删除了我的 crossBars 函数。我尝试将 redLine 矩形的线更改为 0，但当我释放鼠标时它仍然处于相同位置。

final int NUM_LINES = 15;
final int LINE_THICK = 20;
final int CONVERGE_VERTICAL_OFFSET = 175;
final int CONVERGE_VERTICAL_OFFSET2 = 100;

int capSize = 20;
int width = 500;
int height = 500;
int x1 = 30;
int crossWidth = width - (30*2);
int y1 = height - 20;
int crossHeight = 20;
int capX = x1;
int capY = y1 + crossHeight/2;
int capX2 = width - x1;
int diffY = 60;
int diffX = 10;
int redLinex = 145;
int redLinex2 = 350;
int redLiney = 0;
int redlineHeight = height;
int redlineWidth = 5;

void setup(){
    size(500,500);
    drawConvergingvertical();
    horizontalCross();
    drawYellowlines();
}

void draw(){
}

void mousePressed(){
    drawRedlines();
}

void mouseReleased(){
    drawConvergingvertical();
    horizontalCross();
    drawYellowlines();
}

void horizontalCross(){
    for(int rows = 0; rows < NUM_LINES; rows++){
        //println(rows, capX, capX2); Used this to Debug;
        drawCrossbars();
        y1 = y1 - diffY;
        capY = capY - diffY - 1;
        x1 = x1 + diffX;
        capX = capX + diffX;
        crossWidth = crossWidth - diffX*2;
        capX2 = capX2 - diffX;
        crossHeight = crossHeight - 2;
        capSize = capSize - 2;
    }
}

void drawCrossbars(){
    rect(x1,y1,crossWidth,crossHeight);
    ellipse(capX,capY,capSize,capSize);
    ellipse(capX2,capY,capSize,capSize);
}

void drawConvergingvertical(){
    fill(0);
    stroke(0);
    quad(width/2-CONVERGE_VERTICAL_OFFSET,height,width/2-CONVERGE_VERTICAL_OFFSET2,0,width/2-CONVERGE_VERTICAL_OFFSET2+LINE_THICK,0,width/2-CONVERGE_VERTICAL_OFFSET+LINE_THICK,height);
    quad(width/2+CONVERGE_VERTICAL_OFFSET,height,width/2+CONVERGE_VERTICAL_OFFSET2,0,width/2+CONVERGE_VERTICAL_OFFSET2-LINE_THICK,0,width/2+CONVERGE_VERTICAL_OFFSET-LINE_THICK,height);
}

void drawYellowlines(){
    fill(255,255,0);
    stroke(255,255,0);
    rect(150, height - 100, 200, 10);
    rect(150, 100, 200, 10);
}

void drawRedlines(){
    redLinex = 145;
    redLinex2 = 350;
    redLiney = 0;
    redlineHeight = height;
    redlineWidth = 5;
    fill(255,0,0);
    stroke(255,0,0);
    rect(redLinex,redLiney,redlineWidth,redlineHeight);
    rect(redLinex2,redLiney,redlineWidth,redlineHeight);
}

Answer 1

draw()方法是一个循环。如果你在那个循环中绘制你的东西，你可以实时更新它。我稍微修改了你的循环，所以红线只在鼠标左键按下时出现：

final int NUM_LINES = 15;
final int LINE_THICK = 20;
final int CONVERGE_VERTICAL_OFFSET = 175;
final int CONVERGE_VERTICAL_OFFSET2 = 100;

int capSize = 20;
int width = 500;
int height = 500;
int x1 = 30;
int crossWidth = width - (30*2);
int y1 = height - 20;
int crossHeight = 20;
int capX = x1;
int capY = y1 + crossHeight/2;
int capX2 = width - x1;
int diffY = 60;
int diffX = 10;
int redLinex = 145;
int redLinex2 = 350;
int redLiney = 0;
int redlineHeight = height;
int redlineWidth = 5;

boolean redLineVisible = false;

void setup(){
  size(500,500);
  //drawConvergingvertical();
  //horizontalCross();
  //drawYellowlines();
}

void draw(){
  background(255);
  drawConvergingvertical();
  horizontalCross();
  drawYellowlines();
  drawRedlines();
}

void mousePressed(){
  //drawRedlines();
  redLineVisible = true;
}

void mouseReleased(){
  //drawConvergingvertical();
  //horizontalCross();
  //drawYellowlines();
  //drawRedlines();
  redLineVisible = false;
}




void horizontalCross(){
  for(int rows = 0; rows < NUM_LINES; rows++){
    //println(rows, capX, capX2); Used this to Debug;
    drawCrossbars();
    y1 = y1 - diffY;
    capY = capY - diffY - 1;
    x1 = x1 + diffX;
    capX = capX + diffX;
    crossWidth = crossWidth - diffX*2;
    capX2 = capX2 - diffX;
    crossHeight = crossHeight - 2;
    capSize = capSize - 2;
  }
}

void drawCrossbars(){
  rect(x1,y1,crossWidth,crossHeight);
  ellipse(capX,capY,capSize,capSize);
  ellipse(capX2,capY,capSize,capSize);
}

void drawConvergingvertical(){
  fill(0);
  stroke(0);
  quad(width/2-CONVERGE_VERTICAL_OFFSET,height,width/2-CONVERGE_VERTICAL_OFFSET2,0,width/2-CONVERGE_VERTICAL_OFFSET2+LINE_THICK,0,width/2-CONVERGE_VERTICAL_OFFSET+LINE_THICK,height);
  quad(width/2+CONVERGE_VERTICAL_OFFSET,height,width/2+CONVERGE_VERTICAL_OFFSET2,0,width/2+CONVERGE_VERTICAL_OFFSET2-LINE_THICK,0,width/2+CONVERGE_VERTICAL_OFFSET-LINE_THICK,height);
}

void drawYellowlines(){
  fill(255,255,0);
  stroke(255,255,0);
  rect(150, height - 100, 200, 10);
  rect(150, 100, 200, 10);
}

void drawRedlines(){
  if (redLineVisible) {
    redLinex = 145;
    redLinex2 = 350;
    redLiney = 0;
    redlineHeight = height;
    redlineWidth = 5;
    fill(255,0,0);
    stroke(255,0,0);
    rect(redLinex,redLiney,redlineWidth,redlineHeight);
    rect(redLinex2,redLiney,redlineWidth,redlineHeight);
  }
}

玩得开心。

Answer 2

How to remove a shape without using background(255); [...]

完全没有。你不能 "remove" 在 window 中绘制的东西。你所能做的就是画一些不同的东西，覆盖形状。 background 不删除任何内容。它只是在整个 window.
中绘制一个统一的颜色您必须在 draw().

中重绘整个场景

使用内置变量mousePressed来识别鼠标是否被按下，并根据变量的状态调用drawRedlines()。此外，您必须在每一帧中重置某些变量的状态：

void draw() {

    capSize = 20;
    x1 = 30;
    crossWidth = width - (30*2);
    y1 = height - 20;
    crossHeight = 20;
    capX = x1;
    capY = y1 + crossHeight/2;
    capX2 = width - x1;
    diffY = 60;
    diffX = 10;
    redLinex = 145;
    redLinex2 = 350;
    redLiney = 0;
    redlineHeight = height;
    redlineWidth = 5;

    background(200);
    drawConvergingvertical();
    horizontalCross();
    drawYellowlines();
    if (mousePressed) {
        drawRedlines();
    }
}

注意，鼠标回调函数mousePressed中不需要画任何东西mouseReleased。

void mousePressed(){
}

void mouseReleased(){
}

旁注：从代码中删除变量 width and height 的声明。这是内置变量，所以根本不需要声明它们，特别是因为因变量设置在 draw 中。

~~int width = 500;~~
~~int height = 500;~~

如何在不使用背景的情况下删除形状（255）；

How to remove a shape without using background(255);

java

processing

function