如何在点击按钮后清除画布和按钮(以及它们的功能)？ [英] How to clear canvas and buttons (and their functuality) after clicking a button?
本文介绍了如何在点击按钮后清除画布和按钮(以及它们的功能)？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个数据可视化程序，当用户点击其中一个主屏幕按钮时，他们会被带到数据可视化。我想不出该怎么做才好。到目前为止，我可以在某种程度上清理画布，但按钮仍在运行，尽管您看不到它们。我希望能够按下主屏幕上的一个按钮，将用户带到一个全新的页面(这仍在进行中，所以我已经开始这样做的唯一按钮是‘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
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
This 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;
}
}
如有任何帮助，将不胜感激，谢谢。
推荐答案
可以帮助您解决这个问题的一个好的设计模式是Finite State Machine。FSM允许您确定可能导致另一个上下文的上下文，并将某些操作限制在某些上下文中。超级马里奥兄弟就是一个很好的例子：当他还小的时候，得到一个神奇的蘑菇就会把他变成超级马里奥。当他变得超级时，得到一朵花会把他变成火火马里奥。但是，虽然小，但得到一朵花只会让他成为超级马里奥，而不是火力马里奥。这是因为每个州都有规则，他不能在不考虑这些规则的情况下从一个州跳到另一个州。
这里有一个类似于您正在做的事情的FSM的近似架构：您有一个菜单，虽然在菜单中您可以使用它，但当您选择一个选项时，您会将状态更改为其他选项，并具有不同的选项和视觉效果。我假设您也可以从这些图表返回到菜单并选择其他选项。我将向您展示如何在您的代码中实现此功能。
菜单
在您的情况下，菜单是让其余部分就位的关键。业务规则将声明用户可以看到并可以使用这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()方法并将其放在那里。这就是当你处于‘菜单’状态时调用的按钮，所以只要你在菜单中，按钮就会是可见的和可用的。
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开关。这与我们刚才所做的是相同的原则。请注意，我删除了对"；主页"；的调用，并在单击选择了其他状态之一后添加了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
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
This 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();
}
如果你有什么不明白的，请毫不犹豫地伸出援手。玩得开心！
这篇关于如何在点击按钮后清除画布和按钮(以及它们的功能)？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
