processing - 如何在处理中使用 mousePressed() 处理 2 个不同的事件?
问题描述
我正在研究我的大学项目并遇到了一个问题。我正在为一些数据创建可视化并希望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();
// }
//}
pieChartPage()
页面空白setup()
draw()
:
//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();
}
图像按钮类:
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");
}
}
}
解决方案
您不需要编写两个mousePressed()
方法,只需测试方法中的案例以区分您正在处理的案例,经过一番阅读后,我认为您的state
变量在用户打开时等于 2pieChartPage()
所以我将您的代码移入第一个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 图像事件更改为反转先前的布尔图像,而不是调用该绘制方法:
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;
...
}
推荐阅读
- c - strcpy 在特定内存地址返回值加垃圾
- python - 执行 NER(命名实体识别)的过程 - NLP
- uwp - 在外围设备端断开连接后(重新)连接 - UWP
- python - 如何在 Pandas 中过滤带有条件空白字段的记录
- video - FFmpeg 丢失视频文件的转换
- tensorflow.js - 如何检查 tfjs 模型是否正确加载到浏览器
- r - 一个运行完全相同的数据,另一个不在 R 中类似 lm() 的函数中运行
- postgresql - 为什么 pg_dump 不转储表内容?
- php - 单击按钮时很难使用 AJAX 发布图片
- sql - 根据 SQL Server 中时间戳的差异过滤掉行