Processing 单击按钮后如何清除画布和按钮（及其功能）？

我正在尝试创建一个数据可视化程序，当用户单击其中一个主屏幕按钮时，这些按钮将进入数据可视化。我不知道如何正确地做这件事。到目前为止，我可以清理画布，但按钮仍在工作，即使你看不到它们。我希望能够按下其中一个主屏幕按钮，将用户带到一个全新的页面（这仍然是一项正在进行的工作，因此我开始这样做的唯一按钮是“pieChartButton”）

以下是我目前的处理代码：

Button pieChartButton, bubbleGraphButton, scatterGraphButton, homeButton; //button to be used
Button homeButtonBar, PCDescriptionBox, BGDescriptionBox, SGDescriptionBox; //design features that use same attributes as buttons
int buttonClicked = 1; //check to see if button works

void setup() {
  size(1200,800);
  pixelDensity(2); //function to make the render of the program Apple Retina displays and Windows High-DPI displays look smoother and less pixelated
  smooth();
  
  //creating the button object
  pieChartButton = new Button("Pie Chart", 5, 5, 590, 340);
  bubbleGraphButton = new Button("Bubble Graph", 5, 355, 590, 340);
  scatterGraphButton = new Button("Scatter Graph", 605, 5, 590, 340);
  
  //design features
  PCDescriptionBox = new Button("Pie chart will show this and that and other stuff \n test", 605, 355, 590, 340);
  BGDescriptionBox = new Button("Bubble graph with nice bubbles, mucho colours and information with useful stuff", 605, 355, 590, 340);
  SGDescriptionBox = new Button("Scatter Graph \n \n \n \nThis Scatter represents the data about video game publishers and what genres they publish", 605, 355, 590, 340);
}

void draw() {
  //DRAWING BUTTONS + DISPLAY DESCRIPTION 
  //if mouse is hovering over button, button title & description will appear, but now a square will appear to cheack it works
  if (pieChartButton.mouseHoverOver()){
    fill(225,0,0);
    rect(700, 400, 50, 50);
    PCDescriptionBox.drawDesign(); //display of what is in the pie chart window
  } else if (bubbleGraphButton.mouseHoverOver()){
      fill(0,0,225);
      rect(700, 400, 50, 50);
      BGDescriptionBox.drawDesign(); //show description for bubble graph window
  } else if (scatterGraphButton.mouseHoverOver()){
    fill(0,225,0);
    rect(700, 400, 50, 50);
    SGDescriptionBox.drawDesign(); //show description for scattter graph window
  } else{
    homePage();
  }
}

//mouse clicked on button
void mousePressed(){
   if (pieChartButton.mouseHoverOver()){   //check if pie chart button clicked
     println("Clicked PC: "+ buttonClicked++);
     pieChartPage();
   } else if (bubbleGraphButton.mouseHoverOver()) {  //check if bubble graph button clicked
     println("Clicked BG: "+ buttonClicked++);
   } else if (scatterGraphButton.mouseHoverOver()){ //checks if scatter graph button clicked
     println("Clicked SG: "+ buttonClicked++);
   } else {
     homePage();
   }
}


//The different pages of the program
//main home screen page
void homePage(){
  background(225);
  //noStroke();
  //fill(255);
  //rect(0, 725, 1200, 100);
  pieChartButton.Draw();  //draw Pie chart button in home screen
  bubbleGraphButton.Draw();  //draw bubble graph button in home screen
  scatterGraphButton.Draw(); //draw scatter graph button in home screen
  homeButtonBar = new Button("", 5, 710, 1190, 200);
  homeButtonBar.Draw();
}

void pieChartPage(){
  background(175,0,225);
  homeButtonBar = new Button("", 5, 710, 1190, 200);
  homeButtonBar.Draw(); 
}

代码的按钮类：

 class Button {

 String label;
 float x, y, w, h; //top left corner x position, top left corner y position, button width, button height

 Button(String labelButton, float xpos, float ypos, float widthButton, float heightButton){
   label=labelButton;
   x=xpos;
   y=ypos;
   w=widthButton;
   h=heightButton;
 }

 void Draw(){
   fill(170);
   stroke(170);
   rect(x, y, w, h, 40);
   textAlign(CENTER, CENTER);
   fill(0);
   text(label, x+(w/2), y+(h/2));
 }

  void drawDesign(){
   fill(225);
   stroke(170);
   rect(x, y, w, h, 40);
   textAlign(LEFT, BASELINE);
   fill(0);
   text(label, x+20, y+40);
 }

 boolean mouseHoverOver(){
   if (mouseX>x && mouseX<(x+w) && mouseY>y && mouseY<(y+h)){ //if mouse within button, return true, if not return false
     return true;
   }
   return false;
 }

}

class按钮{
字符串标签；
浮动x，y，w，h；//左上角x位置，左上角y位置，按钮宽度，按钮高度
按钮（字符串标签按钮、浮点XPO、浮点YPO、浮点宽度按钮、浮点高度按钮）{
标签=标签按钮；
x=xpo；
y=YPO；
w=宽度按钮；
h=高度按钮；
}
作废提款（）{
填充（170）；
中风（170）；
rect（x，y，w，h，40）；
textAlign（居中，居中）；
填充（0）；
文本（标签，x+（w/2），y+（h/2））；
}
无效设计（）{
填充（225）；
中风（170）；
rect（x，y，w，h，40）；
textAlign（左，基线）；
填充（0）；
文本（标签，x+20，y+40）；
}
布尔mousehover（）{
如果（mouseX>x&&mouseX&&mouseY&&mouseY一个可以帮助你解决这个问题的甜美设计模式是。FSM可以让你确定可以导致另一个上下文的上下文，并将一些操作限制在某个上下文中。超级马里奥兄弟就是一个很好的例子：当他很小的时候，得到一个神奇的蘑菇会把他变成超级马里奥。当e是超级，得到一朵花会把他变成火马里奥。但是，虽然很小，得到一朵花只会让他变成超级马里奥，而不是火马里奥。这是因为这些州都有规则，他不能不考虑这些就从一个州跳到另一个州

这里有一个FSM的近似模式，它可能类似于您正在做的事情：您有一个菜单，在菜单中您可以使用它，但当您选择一个选项时，您会将状态更改为其他选项，并具有不同的选项和视觉效果。我假设您也可以从这些图形返回到菜单并选择其他选项


我将向您展示如何在代码中实现这一点


菜单
在您的情况下，菜单是使其余部分就位的关键。业务规则将声明用户可以看到并使用这3个按钮

首先，我们将添加一个全局变量：

int state = 1;

1
表示“菜单”，在模式中是
状态1
。在
draw（）
方法中，我们将放置一个开关，该开关将决定绘制什么：

void draw() {
  switch(state) {
  case 2:
    // pie chart
    break;
  case 3:
    // pie chart
    break;
  case 4:
    // pie chart
    break;
  default:
    // menu
    // the default case means "everything else" and in our case it will be the menu so you cannot have an impossible case
    drawMenu();
  }
}

那么先前在
draw（）
方法中的代码呢？我们将创建
void menu（）
方法并将其放在那里。当您取消“menu”状态时，会调用该方法，因此只要您在菜单中，按钮就会可见且可用

void drawMenu() {
  // DRAWING BUTTONS
  homePage();

  // show graph previews
  if (pieChartButton.mouseHoverOver()) {
    fill(225, 0, 0);
    rect(700, 400, 50, 50);
    PCDescriptionBox.drawDesign(); //display of what is in the pie chart window
  } else if (bubbleGraphButton.mouseHoverOver()) {
    fill(0, 0, 225);
    rect(700, 400, 50, 50);
    BGDescriptionBox.drawDesign(); //show description for bubble graph window
  } else if (scatterGraphButton.mouseHoverOver()) {
    fill(0, 225, 0);
    rect(700, 400, 50, 50);
    SGDescriptionBox.drawDesign(); //show description for scattter graph window
  }
}

现在我们要添加的是，单击按钮也会相应地更改状态。为此，我们将在
mousePressed（）
方法中实现
state
开关。这与我们刚才所做的原理相同。注意，我删除了对“homePage”的调用并在单击选择其他状态之一后添加了
状态
更改：

//mouse clicked on button
void mousePressed() {
  switch(state) {
  case 2:
    // pie chart
    break;
  case 3:
    // bubble graph
    break;
  case 4:
    // scatter graph
    break;
  default:
    // menu
    ClickMenu();
  }
}

void ClickMenu() {
  if (pieChartButton.mouseHoverOver()) {   //check if pie chart button clicked
    println("Clicked PC: "+ buttonClicked++);
    pieChartPage();
    state = 2;
  } else if (bubbleGraphButton.mouseHoverOver()) {  //check if bubble graph button clicked
    println("Clicked BG: "+ buttonClicked++);
    state = 3;
  } else if (scatterGraphButton.mouseHoverOver()) { //checks if scatter graph button clicked
    println("Clicked SG: "+ buttonClicked++);
    state = 4;
  }
}

我看到您有一个
pieChartPage（）
方法来绘制饼图页面（非常好的命名约定，可以让一切变得显而易见）。这应该放在
draw（）中
方法的开关。现在，为了让您可以测试播放，我将添加一个选项，当您在饼图页面上随机单击时，您可以通过在
mousePressed（）
方法中添加一个
state
更改返回菜单页面

另外，请注意，如果您选择饼图以外的任何其他图形，您将永远停留在那里（按钮现在无法工作）。这是因为我们没有为这些状态编写任何程序。以下是此示例的完整代码，其余部分留给您：

Button pieChartButton, bubbleGraphButton, scatterGraphButton, homeButton; //button to be used
Button homeButtonBar, PCDescriptionBox, BGDescriptionBox, SGDescriptionBox; //design features that use same attributes as buttons
int buttonClicked = 1; //check to see if button works
int state = 0;

void setup() {
  size(1200, 800);
  pixelDensity(2); //function to make the render of the program Apple Retina displays and Windows High-DPI displays look smoother and less pixelated
  smooth();

  //creating the button object
  pieChartButton = new Button("Pie Chart", 5, 5, 590, 340);
  bubbleGraphButton = new Button("Bubble Graph", 5, 355, 590, 340);
  scatterGraphButton = new Button("Scatter Graph", 605, 5, 590, 340);

  //design features
  PCDescriptionBox = new Button("Pie chart will show this and that and other stuff \n test", 605, 355, 590, 340);
  BGDescriptionBox = new Button("Bubble graph with nice bubbles, mucho colours and information with useful stuff", 605, 355, 590, 340);
  SGDescriptionBox = new Button("Scatter Graph \n \n \n \nThis Scatter represents the data about video game publishers and what genres they publish", 605, 355, 590, 340);
}

void draw() {
  switch(state) {
  case 2:
    // pie chart
    pieChartPage();
    break;
  case 3:
    // pie chart
    break;
  case 4:
    // pie chart
    break;
  default:
    // menu
    // the default case means "everything else" and in our case it will be the menu so you cannot have an impossible case
    drawMenu();
  }
}

void drawMenu() {
  // DRAWING BUTTONS
  homePage();

  // show graph previews
  if (pieChartButton.mouseHoverOver()) {
    fill(225, 0, 0);
    rect(700, 400, 50, 50);
    PCDescriptionBox.drawDesign(); //display of what is in the pie chart window
  } else if (bubbleGraphButton.mouseHoverOver()) {
    fill(0, 0, 225);
    rect(700, 400, 50, 50);
    BGDescriptionBox.drawDesign(); //show description for bubble graph window
  } else if (scatterGraphButton.mouseHoverOver()) {
    fill(0, 225, 0);
    rect(700, 400, 50, 50);
    SGDescriptionBox.drawDesign(); //show description for scattter graph window
  } else {
    homePage();
  }
}

//mouse clicked on button
void mousePressed() {
  switch(state) {
  case 2:
    // pie chart
    println("Going back to state 1!");
    state = 1;
    break;
  case 3:
    // pie chart
    break;
  case 4:
    // pie chart
    break;
  default:
    // menu
    ClickMenu();
  }
}

void ClickMenu() {
  if (pieChartButton.mouseHoverOver()) {   //check if pie chart button clicked
    println("Clicked PC: "+ buttonClicked++);
    state = 2;
  } else if (bubbleGraphButton.mouseHoverOver()) {  //check if bubble graph button clicked
    println("Clicked BG: "+ buttonClicked++);
    state = 3;
  } else if (scatterGraphButton.mouseHoverOver()) { //checks if scatter graph button clicked
    println("Clicked SG: "+ buttonClicked++);
    state = 4;
  }
}

//The different pages of the program
//main home screen page
void homePage() {
  background(225);
  //noStroke();
  //fill(255);
  //rect(0, 725, 1200, 100);
  pieChartButton.Draw();  //draw Pie chart button in home screen
  bubbleGraphButton.Draw();  //draw bubble graph button in home screen
  scatterGraphButton.Draw(); //draw scatter graph button in home screen
  homeButtonBar = new Button("", 5, 710, 1190, 200);
  homeButtonBar.Draw();
}

void pieChartPage() {
  background(175, 0, 225);
  homeButtonBar = new Button("PIE CHART BUTTON", 5, 710, 1190, 200);
  homeButtonBar.Draw();
}

如果您有什么不明白的地方，请随时联系。玩得开心！
哇，我对您的帮助感激不尽。我非常感谢您的帮助，也非常感谢您对您的实现进行了深入的解释。非常感谢您，您非常喜欢它！今天早上我修复了几个复制和粘贴错误。别忘了将其标记为解决方案如果它解决了您的问题，那么将来有类似问题的用户在搜索网站时可以更轻松地找到它。我如何添加主页按钮，以便用户在另一个页面时可以返回主菜单。我如何更改开关（状态）{}默认值：in draw（）这样就可以使用Home按钮进入主菜单了吗？谢谢，我会创建一个
DrawMenuButton（）
方法，该方法只会绘制“后退”或“菜单”按钮，并在您需要的任何情况下将其添加到
draw（）
开关中（可能除了
默认值
），然后我会添加一个
ClickMenuButton（）
方法添加到
mouseClicked（）
swich中。如果你写了你发布的代码，你应该能够修改它，因为它可以从你已经做过的事情中得到启发（如果没有，花些时间阅读你的代码，你可以用它来启发自己）。回答得很好（+1）。我最近很喜欢你详细的回答。