如何在处理过程中对两个不同的事件使用mousePressed()？

Question

我正在做我的大学项目，遇到了一个问题。我正在为一些数据创建可视化，并希望为不同的事件使用mousePressed()，但当我尝试向mousePressed()添加另一个事件时，它将不会运行，因为代码不知道要运行哪个事件(当按下鼠标时，它会同时触发两个事件)。

我创建了一个事件，允许用户单击主菜单按钮，并希望在用户处于pieChartPage()中时创建另一个事件，他们可以单击PS_Button (这是一个PlayStation徽标)来显示描述。现在，用户可以将鼠标悬停在PS_Button上，描述就会出现，但我希望用户单击PS_Button，这样描述就会留在屏幕上。我创建了一个用于描述格式化的类'ImageButton‘，如果可能的话，我不确定如何将mousePressed()代码添加到这个类中，同时仍然使用其余的代码。

下面是我的代码：

在setup() draw()页面中：mousePressed() -第180行，pieChartPage() -第244行https://drive.google.com/drive/folders/1d5y2Ksq-y05J8tLiyK-1P2uwLjBhm-iH?usp=sharing

该链接包含代码和代码中使用的数据。任何帮助都将不胜感激，谢谢。

setup() draw()

PieChart pieChart; //pie chart 
PImage PS_Button, XBOX_Button, NINTENDO_Button;  //creating variables for the images to be used 
ImageButton psImageDscpt, xboxImageDscpt, nintendoImageDscpt;


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

  loadData();

  //Pie Chart
  //pie chart for pie chart page
  pieChart = new PieChart();
  psImageDscpt = new ImageButton("Sony", 800, 480, 300, 200);
  xboxImageDscpt = new ImageButton("Microsoft", 20, 425, 250, 200);
  nintendoImageDscpt = new ImageButton("Nintendo", 925, 75, 200, 300);
}

void draw() {
  switch(state) {
  case 2:
    // pie chart
    pieChartPage();
    drawMenuButton();
    break;
  case 3:
    bubbleChartPage();
    drawMenuButton();
    // pie chart
    break;
  case 4:
    scatterGraphPage();
    drawMenuButton();
    // 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();
    drawMenuButton();
  }
}

Current mousePressed()和commented是我想要添加的代码：

void mousePressed() {
  switch(state) {
  case 2:     // pie chart page
    ClickedMenuButton();
    println("Going back to state home from PC");
    //state = 1;
    break;
  case 3:      // bubble chart page
    ClickedMenuButton();
    println("Going back to state home from BG");
    break;
  case 4:      // scatter graph page
    ClickedMenuButton();
    println("Going back to state home from SG");
    break;
  default:
    // menu
    ClickMenu();
  }
}

//void mousePressed() {
//  if ( mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height)) {
//    psImageDscpt.drawPieChartDscpt();
//  }
//}

在setup() draw()页面中作废pieChartPage()：

//page for pie chart visualisation
void pieChartPage() {
  background(10);
  //psImgX = 100;
  //psImgY = 50;
  //xboxImgX = 200;
  //xboxImgY = 50;
  //nintendoImgX = 300;
  //nintendoImgY = 50;

  PS_Button = loadImage("ps_logo.png");    //loading images from program folder
  psLegend = loadImage("ps_logo.png");
  XBOX_Button = loadImage("xbox_logo.png");
  xboxLegend = loadImage("xbox_logo.png");
  NINTENDO_Button = loadImage("nintendo_logo.png");
  nintendoLegend = loadImage("nintendo_logo.png");

  //int psImgX, psImgY, xboxImgX, xboxImgY, nintendoImgX, nintendoImgY;

  PS_Button.resize(100, 0);  //size of the button, all are the same 
  XBOX_Button.resize(100, 0);
  NINTENDO_Button.resize(100, 0);
  psLegend.resize(75, 0);
  xboxLegend.resize(75, 0);
  nintendoLegend.resize(125, 0);

  tint(225);// set tint of buttons to be zero
  image(PS_Button, psImgX, psImgY); //drawing image to the screen
  image(XBOX_Button, xboxImgX, xboxImgY);
  image(NINTENDO_Button, nintendoImgX, nintendoImgY);
  //drawing legend and tints represent the company's colour respectively
  tint(pieChartColours[1]);
  image(psLegend, 65, 75);
  tint(pieChartColours[2]);
  image(xboxLegend, 65, 175);
  tint(pieChartColours[0]);
  image(nintendoLegend, 45, 285);

  pieChart.pieChart(width/2, height/2, 400, values_PieChart, pieChartColours); //draws the pie chart into the window 

  textSize(12);
  if (mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height)) {
    psImageDscpt.drawPieChartDscpt();
  } else if (mouseX > xboxImgX && mouseX < (xboxImgX + XBOX_Button.width) && mouseY > xboxImgY && mouseY < (xboxImgY + XBOX_Button.height)) {
    xboxImageDscpt.drawPieChartDscpt();
  } else if (mouseX > nintendoImgX && mouseX < (nintendoImgX + NINTENDO_Button.width) && mouseY > nintendoImgY && mouseY < (nintendoImgY + NINTENDO_Button.height)) {
    nintendoImageDscpt.drawPieChartDscpt();
  } else {
    psImageDscpt.drawPieChartDscpt();
    xboxImageDscpt.drawPieChartDscpt();
    nintendoImageDscpt.drawPieChartDscpt();
  }
  
  //legend text
  fill(225);
  text("Sony / PlayStation", 55, 150);
  text("Microsoft / XBOX", 52.5, 260);
  text("Nintendo", 80, 340);  
  textSize(40);
  fill(pieChartColours[0]);
  text("/50", 230, 330);
  fill(pieChartColours[1]);
  text("/50", 215, 130);
  fill(pieChartColours[2]);
  text("/50", 185, 230);
  
  fill(150,0,0);
  textSize(60);
  text("64%", 590, 350);
  fill(0,150,0);
  textSize(20);
  text("7%", 460, 465);
  fill(0,0,150);
  textSize(40);
  text("11%", 565, 525);
  
  
  homeButtonBar.Draw();
}

ImageButton类：

class ImageButton {
  String pieDscptLabel;
  int xPos1, yPos1, xPos2, yPos2;
  float wDiam1, hDiam1;

  ImageButton (String pieDscptLabel, int xPos1, int yPos1, float wDiam1, float hDiam1) {
    this.pieDscptLabel=pieDscptLabel;
    this.xPos1=xPos1;
    this.yPos1=yPos1;
    this.wDiam1=wDiam1;
    this.hDiam1=hDiam1;
  }

  void drawPieChartDscpt() { //draws the bubbles description
    noFill();
    stroke(225);
    rect(xPos1, yPos1, wDiam1, hDiam1, 20);
    textAlign(LEFT, BASELINE);
    fill(200);
    text(pieDscptLabel, xPos1+10, yPos1+20);
  }

  void mousePressed() {
    if ( mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height)) {
      psImageDscpt.drawPieChartDscpt();
      println("it works");
    }
  }
}

Answer 1

你不需要写两个mousePressed()方法，只需测试方法内部的案例来区分你正在处理的案例，在一些阅读之后，我发现当用户在pieChartPage()上时，你的state变量等于2，所以我将你的代码移到了第一个mousePressed()中，并添加了测试，绘制描述的方法调用工作得很好，但当用户单击时，你必须将其更改为在可见/不可见之间切换，而不是绘制，以下是更新后的代码：

void mousePressed() {
  if(state == 2)
  {
    if ( mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height)) 
    {
      psImageDscpt.drawPieChartDscpt();
    }
  }
  
  switch(state) {
  case 2:     // pie chart page
    ClickedMenuButton();
    println("Going back to state home from PC");
    //state = 1;
    break;
  case 3:      // bubble chart page
    ClickedMenuButton();
    println("Going back to state home from BG");
    break;
  case 4:      // scatter graph page
    ClickedMenuButton();
    println("Going back to state home from SG");
    break;
  default:
    // menu
    ClickMenu();
  }
}

编辑:要将描述保留在屏幕上，您需要做3个更改:首先，在顶部声明一个布尔全局变量，并将其默认设置为false：

//boolean to hold the info whether we draw description or not    
boolean show_ps_description=false;

其次，更改Click on Playstation image事件以反转上一个布尔图像，而不是调用绘制方法：

void mousePressed() {
  if(state == 2)
  {
    if ( mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height)) 
    {
      //inverte the boolean
      show_ps_description=!show_ps_description;
    }
  }
  ...
}

最后，在检查布尔值是否为真后，在绘图循环中调用绘图方法(drawPieChartDscpt())：

void draw() {
  switch(state) {
  case 2:
    // pie chart
    pieChartPage();
    drawMenuButton();
    
    if(show_ps_description)
      psImageDscpt.drawPieChartDscpt();
    
    break;
...
}