懸停在畫布上的圖像

我想做一個簡單的點，並用畫布點擊遊戲，我想將光標更改爲指針，當我將鼠標懸停在繪製的圖像上並將其更改回默認值時，我將鼠標懸停。所以我試圖爲我的畫布上的每個對象製作一個onhover函數。有沒有簡單的方法來檢查我是否懸停在圖像上？我的代碼看起來像這樣至今：懸停在畫布上的圖像

//heres an object for my canvas 
var cupboard = { 
x:200, 
y:320, 
h:300, 
w:180, 
imgUrl:"data\\cbc.png", 
type:2, 
status:'c', 
onhover: function(e,canvas) 
{ 
    if((e.x >= this.x && e.x <= this.x+this.w) &&(e.y >= this.y && e.y <= 
    this.y+this.h)){ 
     canvas.style.cursor = "pointer"; 
    } 
    else 
    { 
     canvas.style.cursor = "default"; 
    } 
} 
//i use an array for these objects 
room1[cupboard,silverkey]; 

//heres the event listener 
document.getElementById("mainCanvas").addEventListener("mousemove", 
function(evt){ 
     var mousepos = getMousePos(document.getElementById("mainCanvas"),evt); 
     for(i in room1) 
     { 
      (function(m){ 
       room1[m].onhover(mousepos,document.getElementById("mainCanvas")); 
      })(i); 
     } 

    });

來源

2017-07-23 Zsolt Fekete

你的代碼是否工作？ – pokeybit

是的，但問題是遊標只在數組的最後一個元素上發生變化，我猜測它與else部分有關。 –

是的，在這個'else'中，當其中一個對象沒有被徘徊時，你將光標設置爲'「default」'。所以你實際上至少把它設置爲（room1.length - 1）次。一個正確的解決方案是改變你的'onhover'返回一個布爾值，檢查是否有'room1.some（obj => obj.onhover）'，並將其設置爲''cursor''或'default'。 Ps：避免在循環中無用地調用DOM。將你的元素存儲在一個變量中（'var canvas = document.getElementById（'mainCanvas'）'） – Kaiido

我上網一看穿過這頁的解決方案和凸輪：

Add onclick and onmouseover to canvas element

坊間的答案是很長，但是可能是有用的你，尤其是關於「.isPointInside」的部分。

希望這會有所幫助！

來源

2017-07-23 09:58:30

懸停在畫布上的圖像

回答

相關問題