擦除按钮的实现

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 class and Toggle class，这样我就可以使用 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);
  }
}

擦除按钮的实现

Implementation of the Erase Button

java

processing

keypress

erase