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

Question

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

我制作了一个允许用户单击主菜单按钮的事件，并希望在用户处于 pieChartPage() 时制作另一个事件，他们可以单击 PS_Button（这是一个 PlayStation 标志）来显示描述。现在用户可以将鼠标悬停在 PS_Button 上并显示说明，但我希望用户单击 PS_Button 以便说明保留在屏幕上。我为描述格式创建了一个 class 'ImageButton'，但我不确定如何在可能的情况下将 mousePressed() 代码添加到 class 中并仍然与其余部分一起使用代码。

这是我的代码：

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

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

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:

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当用户打开时 pieChartPage() 所以我将你的代码移到第一个 mousePressed() 中并添加了测试，绘制描述的方法调用工作正常但你必须更改它以在 [=27= 之间切换] 而不是在用户单击时绘制，这是更新后的代码：

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

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

How to use mousePressed() for 2 different events in processing?

processing