Przetwarzanie - jak pisać; "Po kliknięciu myszą w regionie". Dla efektu kliknięcia przycisku

Question

Zastanawiam się, dlaczego ten kod nie działa zgodnie z przeznaczeniem.

void mousePressed() { 

    if (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height) 
    { 
     img = loadImage("doraemon.png"); 
     image(img, 0, 0, width, height); 
    } 

chcę go tak, że po kliknięciu na obrazie, który mówi „Next”, mogę pokazać inny obraz w tle, a jeśli klikniesz znowu pokazują inny obraz tła i tak dalej.

if (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height) 

^Ten fragment kodu podaje, gdzie znajduje się przycisk "dalej". Po uruchomieniu tego kodu otrzymuję obraz po najechaniu kursorem na ten stan, ale chcę, aby obraz pojawił się po naciśnięciu przycisku.

Czy ktoś wie, jak to napisać?

muszę coś podobnego

if (mousePressed == condition) 
    { 
     then change image 
    } 

Proszę o pomoc. Bardzo to doceniam!

Answer 1

Próbujesz wepchnąć całą swoją logikę do funkcji mousePressed(). Zamiast tego musisz podzielić swoją logikę między funkcję mousePressed() i funkcję draw(). Użyj zmiennych, aby śledzić, co należy narysować. Dostosuj te zmienne w funkcji mousePressed(). Użyj tych zmiennych, aby dowiedzieć się, co narysować w funkcji draw().

Prostym przykładem może wyglądać następująco:

boolean showButton1 = true; 

void setup() { 
    size(200, 200); 
} 

void mousePressed() { 
    if (mouseX < 100 && mouseY < 100) { 
    //button 1 was just clicked, show button 2 instead 
    showButton1 = false; 
    } else if (mouseX > 100 && mouseY > 100) { 
    //button 2 was just clicked, show button 1 instead 
    showButton1 = true; 
    } 
} 

void draw() { 

    background(0); 

    if (showButton1) { //draw the first button 
    fill(255, 0, 0); 
    rect(0, 0, 100, 100); 
    } else { //draw the second button 
    fill(0, 255, 0); 
    rect(100, 100, 100, 100); 
    } 
} 

Ponadto nie powinno nazywać loadImage() od mousePressed() lub draw() funkcji. Zamiast tego załaduj obrazy z funkcji setup() i zapisz je w zmiennych, których możesz użyć później.

Answer 2

Istnieje kilka rzeczy wyglądać nieco off we fragmencie pan pisał:

if (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height) 
    { 
     img = loadImage("doraemon.png"); 
     image(img, 0, 0, width, height); 
    } 

Jedno jest niewielki: jesteś ładowania obrazu za każdym razem nie ma myszy pole 50x50 w prawym dolnym brzegu twojego szkicu. Powinieneś załadować obraz raz w setupie, a następnie po prostu użyć go ponownie, kiedy potrzebujesz go przez szkic.

Druga kwestia może być głównym problemem: dzwonisz pod numer image() tylko raz, gdy mysz zostanie naciśnięta (oraz w prawym dolnym rogu szkicu). Oznacza to, że jeśli masz background() połączenia lub innych połączeń rysunek w funkcji draw(), będzie prawie niezauważalny obraz Doraemon ciągniętą (jak to zostanie skasowana/zamalowane częściej)

Oto co mam na myśli w kodzie:

PImage img;//reference to the image 
boolean imgDraw;//keep track if the image should be drawn or not 

void setup(){ 
    //load the image only once, at setup 
    img = loadImage("doraemon.png"); 
    size(img.width,img.height); 
} 
void draw(){ 
    background(0);//clear each frame 
    if(imgDraw){//draw the image only if it needs to be drawn 
    image(img, 0, 0, width, height); 
    } 
} 
void mousePressed() { 
    //check if the cursor is at the bottom right, and if so, set the image draw flag to true 
    if (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height) 
    { 

     imgDraw = true; 
    } 
    else 
    { 
     imgDraw = false; 
    } 
} 

W rzeczywistości, ponieważ imgDraw jest wartością logiczną, a masz współrzędne sprawdzania wyrażenia binarnego, możesz zwinąć je do pojedynczej instrukcji.

void mousePressed(){ 
    imgDraw = (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height); 
} 

Wygląda ładnie, ale jeśli kod jest trudny do odczytania, nie jest tego wart. Czytelny kod jest lepszy.