擦除按钮的实现

Question

我创建了“擦除”按钮。单击擦除按钮时应删除鼠标绘制的图形。它应该与绘图程序类似地工作。我使用了以下代码，它对擦除按钮的功能没有任何作用。所以，如果我在切换打开时画了一些东西，如果我点击“擦除”按钮，什么都不会发生。有人可以帮我解决这个问题。

import controlP5.*;

ControlP5 cp5;


boolean onOff = false;

boolean erase = false;

void setup(){
  size(1000, 1000);
  background(255);
  PFont font = createFont("Calibri", 15);
  
  
  cp5 = new ControlP5(this);
  
   cp5.addToggle("onOff").
  setPosition(150, 20).
  setSize(40, 15).
  setFont(font).
  
  setMode(ControlP5.SWITCH);
  
   cp5.addButton("Erase").
  setPosition(890, 20).
  setSize(100, 30).
  setFont(font);
  
}
  
  void draw(){
    
    
  fill(246, 246, 246);
  stroke(246, 246, 246);
  rect(0,0, 1000, 80);
  
  stroke(0);
 if (mousePressed == true && onOff == true) {
 line(mouseX, mouseY, pmouseX, pmouseY);
 }
 
}

 void keyPressed(){ 
   if(erase == true) {
     
     background(255);
   }
 }

Answer 1

ControlP5 有一个很酷的功能，它可以自动将变量名称映射到 UI 元素。为了让 ControlP5 找到 UI 元素的名称需要与变量或函数匹配的对应关系。

在您的情况下，只需更改

cp5.addButton("Erase")

到

cp5.addButton("erase")

匹配boolean erase = false;

这是您的代码更改了一个字母并自动格式化（Ctrl+T / CMD + T）：

import controlP5.*;

ControlP5 cp5;


boolean onOff = false;

boolean erase = false;

void setup() {
  size(1000, 1000);
  background(255);
  PFont font = createFont("Calibri", 15);


  cp5 = new ControlP5(this);

  cp5.addToggle("onOff").
    setPosition(150, 20).
    setSize(40, 15).
    setFont(font).

    setMode(ControlP5.SWITCH);

  cp5.addButton("erase").
    setPosition(890, 20).
    setSize(100, 30).
    setFont(font);
}

void draw() {


  fill(246, 246, 246);
  stroke(246, 246, 246);
  rect(0, 0, 1000, 80);

  stroke(0);
  if (mousePressed == true && onOff == true) {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

void keyPressed() { 
  if (erase == true) {
    background(255);
  }
}

或者，您可以完全跳过布尔值，只需在擦除按钮调用的函数中调用背景。如果函数与按钮同名，当您单击该按钮时它会自动获取：

import controlP5.*;

ControlP5 cp5;


boolean onOff = false;

void setup() {
  size(1000, 1000);
  background(255);
  PFont font = createFont("Calibri", 15);


  cp5 = new ControlP5(this);

  cp5.addToggle("onOff").
    setPosition(150, 20).
    setSize(40, 15).
    setFont(font).

    setMode(ControlP5.SWITCH);

  cp5.addButton("erase").
    setPosition(890, 20).
    setSize(100, 30).
    setFont(font);
}

void draw() {


  fill(246, 246, 246);
  stroke(246, 246, 246);
  rect(0, 0, 1000, 80);

  stroke(0);
  if (mousePressed && onOff) {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

void erase() { 
  background(255);
}

Answer 2

我使用了Button 类和Toggle 类，这样我就可以使用Button::isPressed 函数来检查是否按下了擦除按钮。然后，由于您希望在单击按钮时将其擦除，因此您应该使用 mousePressed 而不是 keyPressed 函数。

import controlP5.*;

ControlP5 cp5;

Button erase;
Toggle onOff;

void setup(){
  size(1000, 1000);
  background(255);
  
  PFont font = createFont("Calibri", 15);
  cp5 = new ControlP5(this);

  onOff = new Toggle(cp5, "onOff").
  setPosition(150, 20).
  setSize(40, 15).
  setFont(font).
  
  setMode(ControlP5.SWITCH);
  
  erase = new Button(cp5, "Erase").
  setPosition(890, 20).
  setSize(100, 30).
  setFont(font);
}
  
void draw(){
  fill(246, 246, 246);
  stroke(246, 246, 246);
  rect(0,0, 1000, 80);
  
  stroke(0);
  
  if(mousePressed && onOff.getBooleanValue()) {
     line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

void mousePressed(){
  if(erase.isPressed()){
     background(255);
  }
}