将鼠标悬停在画布中的图像上答案

【问题标题】：Hover on images in a canvas将鼠标悬停在画布中的图像上
【发布时间】：2017-07-23 08:05:24
【问题描述】：

我正在尝试使用画布制作一个简单的点并单击游戏，当我将鼠标悬停在绘制的图像上时，我想将光标更改为指针，并在我悬停时将其更改回默认值。所以我试图为我画布上的每个对象制作一个悬停功能。有什么简单的方法可以检查我是否将鼠标悬停在图像上？到目前为止，我的代码看起来像这样：

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

     });

【问题讨论】：

你的代码有效吗？
是的，但问题是光标仅在数组的最后一个元素上发生变化，我猜它与 else 部分有关。
是的，在此else 中，当其中一个对象未悬停时，您将光标设置为"default"。因此，您实际上至少将 (room1.length - 1) 次设置为默认值。正确的解决方案是将您的onhover 更改为返回布尔值，检查room1.some(obj => obj.onhover) 是否设置为'cursor' 或'default'。 Ps ：避免在循环中对 DOM 进行无用的调用。将您的元素存储在变量中 (var canvas = document.getElementById('mainCanvas'))
这是我需要的解决方案，谢谢！

标签： javascript jquery html canvas

【解决方案1】：

我在网上查看了一个解决方案并在此页面上拍摄：

Add onclick and onmouseover to canvas element

markE 的回答很长，但可能对你有用，尤其是关于“.isPointInside”的部分。

希望这会有所帮助！

【讨论】：