鼠標滾輪時更改圖像

Question

在P5中編碼。我的頁面上有兩張圖片。我試圖編碼它的影響，當鼠標在圖像的左側，它變成了另一個圖像。這是特定的：接下來我們將創建一個懸停效果，當鼠標經過它時圖像發生變化。

我們將使用2張圖像img1和img2，並在鼠標經過它們時在兩者之間切換。我們將使用變量imageX和imageY作爲圖像左上角的x和y位置。

我們需要一個if語句，看起來有點像這樣：

if(XXX){ 
    image(img2, imageX, imageY); 
} else { 
    image(img1, imageX, imageY); 
} 

其中XXX是，我們需要測試的條件。我們需要得到一個與鼠標移過圖像相對應的條件。

這有點像碰到一個球與屏幕兩側。我們需要依次檢查每一面。我們從左側開始。這是圖像的最小x值，它對應於我們的imageX變量。要在我們的圖像上，鼠標X必須比imageX多。

如果您正確地做到了這一點，只要鼠標位於圖像左側的右側，圖像就會改變。

我可以通過編寫一個函數來完成它，但我無法用if語句來完成任務，而這正是他們在本書中所需要的。

這是我的代碼有：

var img1; 
var img2; 

function setup() { 
    createCanvas(600, 600); 
    img1 = loadImage("assets/Slammer.jpg"); 
    img2 = loadImage("assets/rollercoaster.jpg") 

} 

function draw() { 
    image(img1, 100, 100); 
    image(img2, 300, 300); 
} 

    if mouseX > img2{ 
    image(img2, imageX, imageY); 
    } else { 
    image(img1, imageY, imageY); 
    } 

有人能看到什麼即時做錯了什麼，並幫助我嗎？

感謝。

Answer 1

這部分代碼不會使一噸的感覺：

function draw() { 
    image(img1, 100, 100); 
    image(img2, 300, 300); 
} 

    if mouseX > img2{ 
    image(img2, imageX, imageY); 
    } else { 
    image(img1, imageY, imageY); 
    } 

在你draw()功能，你同時顯示的圖像。但if聲明 功能外，所以它只發生一次當您的代碼第一次加載（我敢打賭會導致錯誤，因爲你不能調用image()函數，直到調用setup()後）。

在任何情況下，即使您將該代碼移到draw()函數中，您仍將mouseX（這是一個數字）與img2（它是圖像）進行比較。你期望這種比較能做什麼？一個數字如何能比圖像更大？

這聽起來像你想比較圖像的位置和鼠標位置。下面是繪製黑色一個例子，如果鼠標在左側，白如果鼠標在右邊：

function draw(){ 
    if(mouseX < width/2){ 
     background(0); 
    } 
    else{ 
     background(255); 
    } 
}