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

Question

我正在尝试创建一个数据可视化程序，当用户单击其中一个主屏幕按钮时，他们将被带到数据可视化。我无法弄清楚如何正确地做到这一点。到目前为止，我能够清除 canvas 但按钮仍在运行，即使您看不到它们。我希望能够按下主屏幕按钮之一将用户带到一个全新的页面（这仍在进行中，所以我开始这样做的唯一按钮是 '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 代码：

 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;
 }

}

如有任何帮助，我们将不胜感激。

Answer 1

Finite State Machine 可以帮助您解决这个问题的一个很好的设计模式。 FSM 让您确定可以导致另一个上下文的上下文，并将某些操作限制在某些上下文中。超级马里奥兄弟就是一个很好的例子：当他还小的时候，得到一个魔法蘑菇就会把他变成超级马里奥。当他超级时，得到一朵花会把他变成火马里奥。但是虽然小，但得到一朵花只会让他变成超级马里奥，而不是火马里奥。那是因为这些状态中的每一个都有规则，他不能不考虑这些就从一个状态跳到另一个状态。

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

我将向您展示如何在您的代码中实现它。

菜单

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

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

int state = 1;

1 表示“菜单”，因为在模式中它是 STATE 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”的调用，并在单击 selected 其他状态之一后添加了 state 更改：

//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();
}

如果有什么不明白的地方，请随时联系我们。玩得开心！

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

How to clear canvas and buttons (and their functuality) after clicking a button?

processing

菜单