处理，替换文本

Question

我目前得到了一个海报我试图使一个研究这个代码（要去把它所有，因为它可能是相关的）：

package interactiveposter; 
import processing.core.PApplet; 
import processing.core.PImage; 


public class InteractivePoster extends PApplet { 
// Declare variables: 

    PImage[] imgs = new PImage[12]; 
    int i = 0; 
    boolean introduction = true; 
    boolean storyboardtext = true; 
    boolean features = true; 
    int picWidth = 300; 
    int picHeight = 200; 
    PImage storyboard; 
    PImage phone; 

// Set size of window and load images: 

    public void setup() { 
     size(750,900); 
     smooth(); 
     storyboard = loadImage("C:/Users/Frederik/Desktop/Medialogy AAU/Images/storyboardfixed.png"); 
     storyboard.resize(270, 757); 
     phone = loadImage("C:/Users/Frederik/Desktop/Medialogy AAU/Images/phone.PNG"); 
     phone.resize(300, 500); 
    } 

// All that should run continuously goes in draw: 

    public void draw() { 
     background(255,255,255); 
     textAlign(CENTER); 
     textSize(24); 
     fill(0); 
     text("Creative Play - Applied Technology",width/2,50); 
     textSize(16); 
     fill(120); 
     text("B-341",width/2,900); 
     image(storyboard, 50, 100); 
     image(phone, 385, 140); 

     int tboxPos = 50; 
     tboxPos=tboxPos+335; 
     if(introduction == false) { 
      features = true; 
      text("Text 1...Introduction", 490, 230); 
     } 

     if(storyboardtext == false) { 
      text("Text 2...Storyboard", 480, 230); 
     } 
     if(features == false) { 
      text("Text 3...Features", 480, 230); 
      introduction = true; 
     } 



     fill(0,0,0); 
     rect(tboxPos,700, 300, 100, 7); //FrameRect 

     fill(102,204,255); 
     rect(tboxPos, 700, 300, 50, 7); //IntroductionRect 
     fill(255,255,255); 
     textSize(20); 
     text("Introduction", tboxPos+150, 730); 

     fill(102,204,255); 
     rect(tboxPos, 750, 150, 50, 7); // StoryboardRect 
     fill(255,255,255); 
     textSize(20); 
     text("Storyboard", tboxPos+75, 780); 

     fill(102,204,255); 
     rect(tboxPos+150, 750, 150, 50, 7); //FeaturesRect 
     fill(255,255,255); 
     textSize(20); 
     text("Features", tboxPos+225, 780); 
    } 

// Check if mouse is clicked on one of the images, then change that variable from true to false or opposite 

    public void mouseClicked() { 
     if(mouseX > 385 && mouseX < 685 && mouseY > 700 && mouseY < 750) 
     { 
      if(introduction == true) introduction = false; 
      else introduction = true; 
     } 
     if(mouseX > 385 && mouseX < 535 && mouseY > 750 && mouseY < 800) 
     { 
      if(storyboardtext == true) storyboardtext = false; 
      else storyboardtext = true; 
     } 
     if(mouseX > 535 && mouseX < 685 && mouseY > 750 && mouseY < 800) 
     { 
      if(features == true) features = false; 
      else features = true; 
     } 
    } 

} 

海报：

因此，当您按下智能手机下方的按钮时，应显示相关文本。现在它单独工作，我点击介绍，但看到其他人之一，我必须再次点击介绍，使其消失。 我需要做的是使文本替换另一个按钮时单击。

我试图在if语句中将其他文本设置为true，但只对其中的一些有效，其他文本则被阻止。

另一个想法是在void mouseClicked（）中做一些事情，但我不确定是什么。

帮助非常感谢，谢谢=）

Answer 1

现在，你只设置为每个按钮一个变量。相反，你想要做的是设置全部的变量。

下面是一个例子：

if(mouseX > 385 && mouseX < 685 && mouseY > 700 && mouseY < 750){ 
    if(introduction == true){ 
     introduction = false; 
    } 
    else{ 
     features = false 
     storyboardtext = false; 
     introduction = true; 
    } 
} 

顺便说一句，你可以缩短上述所有的：

if(mouseX > 385 && mouseX < 685 && mouseY > 700 && mouseY < 750){ 
    features = false 
    storyboardtext = false; 
    introduction = !introduction; 
} 

您还可以考虑使用的enum代替3个独立的boolean值。

Answer 2

我推荐使用一个整数来跟踪状态，更多的状态布尔变得更难管理，而且犯错更容易。

这里有一个基本的例子：

final int INTRODUCTION = 0; 
final int STORYBOARD = 1; 
final int FEATURES = 2; 
int state = INTRODUCTION; 

void draw(){ 
    switch(state){ 
    case INTRODUCTION: 
     drawIntroduction(); 
    break; 
    case STORYBOARD: 
     drawStoryboard(); 
    break; 
    case FEATURES: 
     drawFeatures(); 
    break; 
    } 
} 

void drawIntroduction(){ 
    background(0); 
    fill(255); 
    text("Introduction",15,15); 
} 
void drawStoryboard(){ 
    background(255); 
    fill(0); 
    text("Storyboard",15,55); 
} 
void drawFeatures(){ 
    background(192); 
    fill(64); 
    text("Features",15,95); 
} 

void keyReleased(){ 
    state = (state + 1) % 3;//cycle through states to test 
} 

我建议使用单独的函数绘制每个状态保持代码的整洁。按任意键循环浏览状态。

以上，大致适应你的代码，看起来有点像这样：

package interactiveposter; 
import processing.core.PApplet; 
import processing.core.PImage; 


public class InteractivePoster extends PApplet { 
// Declare variables: 

    PImage[] imgs = new PImage[12]; 
    int i = 0; 
    int picWidth = 300; 
    int picHeight = 200; 
    PImage storyboard; 
    PImage phone; 

    final int INTRODUCTION = 0; 
    final int STORYBOARD = 1; 
    final int FEATURES = 2; 
    int state = INTRODUCTION; 


// Set size of window and load images: 

    public void setup() { 
     size(750,900); 
     smooth(); 
     storyboard = loadImage("C:/Users/Frederik/Desktop/Medialogy AAU/Images/storyboardfixed.png"); 
     storyboard.resize(270, 757); 
     phone = loadImage("C:/Users/Frederik/Desktop/Medialogy AAU/Images/phone.PNG"); 
     phone.resize(300, 500); 
    } 

// All that should run continuously goes in draw: 

    public void draw() { 
     background(255,255,255); 
     textAlign(CENTER); 
     textSize(24); 
     fill(0); 
     text("Creative Play - Applied Technology",width/2,50); 
     textSize(16); 
     fill(120); 
     text("B-341",width/2,900); 
     image(storyboard, 50, 100); 
     image(phone, 385, 140); 

     int tboxPos = 50; 
     tboxPos=tboxPos+335; 
     if(state == INTRODUCTION) { 
      text("Text 1...Introduction", 490, 230); 
     } 

     if(state == STORYBOARD) { 
      text("Text 2...Storyboard", 480, 230); 
     } 
     if(state == FEATURES) { 
      text("Text 3...Features", 480, 230); 
     } 



     fill(0,0,0); 
     rect(tboxPos,700, 300, 100, 7); //FrameRect 

     fill(102,204,255); 
     rect(tboxPos, 700, 300, 50, 7); //IntroductionRect 
     fill(255,255,255); 
     textSize(20); 
     text("Introduction", tboxPos+150, 730); 

     fill(102,204,255); 
     rect(tboxPos, 750, 150, 50, 7); // StoryboardRect 
     fill(255,255,255); 
     textSize(20); 
     text("Storyboard", tboxPos+75, 780); 

     fill(102,204,255); 
     rect(tboxPos+150, 750, 150, 50, 7); //FeaturesRect 
     fill(255,255,255); 
     textSize(20); 
     text("Features", tboxPos+225, 780); 
    } 

// Check if mouse is clicked on one of the images, then change that variable from true to false or opposite 

    public void mouseClicked() { 
     if(mouseX > 385 && mouseX < 685 && mouseY > 700 && mouseY < 750) 
     { 
      state = INTRODUCTION; 
     } 
     if(mouseX > 385 && mouseX < 535 && mouseY > 750 && mouseY < 800) 
     { 
      state = STORYBOARD; 
     } 
     if(mouseX > 535 && mouseX < 685 && mouseY > 750 && mouseY < 800) 
     { 
      state = FEATURES; 
     } 
    } 

} 

请注意，我无法测试此代码（所以有可能是语法错误），但这个概念解释应该清楚。

此外，在类似的问题，也是按钮样品检出this answer（下文件>例子>专题> GUI>按钮在处理）