在画布中悬停在图像上

Question

我正在尝试使用canvas制作一个简单的点和点击游戏，我想在悬停在绘制的图像上时将光标更改为指针，并在悬停关闭时将其更改回默认值。因此，我尝试为画布上的每个对象创建一个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);
         }

     });

- Zsolt Fekete

---

你的代码能正常工作吗？ - pokeybit

是的，但问题是光标只在数组的最后一个元素上更改，我想这与else部分有关。 - Zsolt Fekete

是的，在这个“else”中，当其中一个对象没有被悬停时，你会将光标设置为“默认”。因此，你实际上至少将其设置了(room1.length - 1)次为默认。正确的解决方案是将你的“onhover”更改为返回一个布尔值，检查是否room1.some(obj => obj.onhover)并在那里将其设置为'cursor'或'default'。P.S. 避免在循环中进行无用的DOM调用。将元素存储在变量中而不是(var canvas = document.getElementById('mainCanvas'))。 - Kaiido

这就是我需要的解决方案，谢谢！ - Zsolt Fekete

Answer 1

我在网上搜寻了解决方案并找到了以下页面：Add onclick and onmouseover to canvas element。markE的答案非常详细，尤其是关于“isPointInside”的部分可能对您有用。希望这可以帮助您！

- Jeff G