處理，替換文本

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>按鈕在處理）