如何在处理中使用 mousePressed() 处理 2 个不同的事件？

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

当前mousePressed() 并注释的是我要添加的代码：

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() 方法，只需测试方法内的案例以区分您正在处理的案例，经过阅读后我发现您的state 变量等于2 当用户在@ 987654323@ 所以我将你的代码移到第一个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;

其次，您将点击 Playstation 图像事件更改为反转先前的布尔图像，而不是调用该绘制方法：

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