Chế biến - cách viết; "Trên nhấp chuột trong khu vực". Để thực hiện việc nhấp vào nút

Question

Tôi đã tự hỏi tại sao mã này không hoạt động như dự định.

void mousePressed() { 

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

Tôi muốn nó để khi tôi bấm vào một hình ảnh mà nói 'bên cạnh', tôi có thể hiển thị một hình ảnh khác nhau trên nền, và nếu nhấp một lần nữa, hiển thị hình nền khác và vân vân.

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

^Đoạn mã này cho biết nút 'tiếp theo' ở đâu. Khi tôi chạy mã này, tôi nhận được hình ảnh trong khi di chuột qua điều kiện, nhưng tôi muốn hình ảnh xuất hiện sau khi tôi nhấn nút.

Có ai biết cách viết điều đó không?

tôi cần một cái gì đó giống như

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

Xin vui lòng giúp. Tôi rất trân trọng điều này!

Answer 1

Bạn đang cố gắng nhồi nhét tất cả logic của mình vào hàm mousePressed(). Thay vào đó, bạn cần chia logic của mình giữa hàm mousePressed() và hàm draw(). Sử dụng các biến để theo dõi những gì cần được rút ra. Điều chỉnh các biến đó trong hàm mousePressed(). Sử dụng các biến đó để tìm ra những gì cần vẽ trong hàm draw().

Một ví dụ đơn giản có thể trông như thế này:

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

Ngoài ra, bạn không nên gọi loadImage() từ mousePressed() hoặc draw() chức năng. Thay vào đó, hãy tải hình ảnh của bạn từ hàm setup() và lưu trữ chúng trong các biến mà bạn có thể sử dụng sau này.

Answer 2

Có một vài điều trông hơi tắt trong đoạn mã bạn được đăng:

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

Một là nhỏ: bạn đang tải hình ảnh mỗi lần có chuột bấm vào một hộp 50x50 ở rìa dưới bên phải của bản phác thảo của bạn. Bạn nên tải hình ảnh một lần trong thiết lập, sau đó chỉ cần sử dụng lại nó khi bạn cần nó thông qua bản phác thảo của bạn.

Thứ hai có thể là vấn đề chính của bạn: bạn gọi image() chỉ một lần nếu bạn nhấn chuột (và ở góc dưới cùng bên phải của bản phác thảo). Điều này có nghĩa là nếu bạn có cuộc gọi background() hoặc các cuộc gọi vẽ khác trong chức năng draw(), bạn sẽ hầu như không nhận thấy hình ảnh Doraemon được vẽ (vì nó bị xóa/sơn thường xuyên hơn)

Đây là ý nghĩa của tôi trong mã:

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

Thực ra, vì, imgDraw là boolean và bạn có biểu thức kiểm tra biểu thức boolean, bạn có thể thu gọn toạ độ thành một câu lệnh.

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

Có vẻ tốt, nhưng nếu mã khó đọc thì không đáng. Mã có thể đọc được tốt hơn.