将鼠标悬停事件附加到多个画布图像答案

【问题标题】：Attaching mouse over event to multiple canvas images将鼠标悬停事件附加到多个画布图像
【发布时间】：2012-01-16 13:37:46
【问题描述】：

我有这个代码：

$('#whatever .item').each(function() {
    var canvas = document.getElementById('whatever');
    var ctx = canvas.getContext('2d');
    /* Drawing */


    $(document).mousemove(function(e) {

        mouseY = e.pageY;
        mouseX = e.pageX;       


            if(ctx.isPointInPath(mouseX, mouseY)) {
             alert("HEY!");     

            }

     });
});

我在画布中有多个跨度标签。然后我使用跨度标签在画布上创建图像，使用“每个”。所以我假设如果我添加了一个 mousemove，它会为每个 span 标签添加一个，但事实并非如此。有什么想法吗？

【问题讨论】：

你能发布你的html吗？我试图了解你真正想要什么
需要一个 js fiddle 才能在这方面做很多事情，因为这里没有太多信息可供参考。
“画布中的多个跨度标签”没有任何意义，除非您严格谈论后备内容。你在说什么？你能提供一些代码吗？

标签： jquery canvas mousemove

【解决方案1】：

如果我对你的理解正确，我可能不会，你不能像现在这样做事。

现在，<canvas> 标记内有多个 <span> 标记，表示正在绘制到画布上的数据。然后，当您将鼠标悬停在正在绘制到画布上的数据上时，您希望发生一些事情。

这不是画布的工作方式。这些<span> 标签都不会出现在页面上（除了作为后备内容），并且它们的 mousemove/etc 事件与画布表面无关。

当您使用 span 标签将图像（或任何数据）绘制到画布上时，您必须跟踪绘制它们的位置。然后，您只需要在<canvas> 本身上发生一个mousemove 事件，该事件将遍历您尝试检测的位置（或路径或矩形）列表。

因此，要将鼠标事件附加到画布上绘制的图像，您必须跟踪自己绘制的所有内容。除画布本身之外的任何东西上的鼠标事件都不会剪切它。所有这些您都必须自己编写或使用库。你已经表明你不想再使用库了，所以here's a tutorial on learning how to make the canvas interactive（mousedown、mousemove、跟踪绘制的内容等）。

【讨论】：

最有用的评论。享受你的业力！

【解决方案2】：

尝试使用 KineticJS 库。 http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

【讨论】：

我更喜欢只使用 Canvas 和 jQuery，而不添加更多 API

【解决方案3】：

像这样将mousemouse()附加到所有图像不是更容易吗：

$('#whatever .item').mousemove(function(e) { } );

【讨论】：

不，我使用画布内的元素作为标记向画布添加数据。它们实际上并不是我想要悬停的对象，我想悬停在每个数据块上并启动 jQuery 响应。