Question

我有这段代码：

$('#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!");     

            }

     });
});

我在画布中有多个span标签。然后我使用span标签在画布上创建图像，使用'each'。所以我假设如果我添加了一个鼠标移动它会为每个span标签添加一个，但它没有。有什么想法吗？

Answer 1

如果我理解正确，而我可能不理解，你就不能按照现在的方式做事。

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

这不是画布的工作原理。这些<span>标签中没有一个显示在页面上（除了作为后备内容）并且它们的mousemove / etc事件与画布表面没有关系。

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

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

Answer 2

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

Answer 3

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

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

将事件上的鼠标附加到多个画布图像

3 个答案: