我已经构建了一个 Canvas 库来管理一些工作项目的形状场景。每个形状都是一个对象，具有与之关联的绘图方法。在刷新 Canvas 期间，绘制堆栈中的每个形状。形状可能绑定(bind)了典型的鼠标事件，这些事件都包裹在 Canvas 自己的 DOM 鼠标事件周围。

我在野外发现了一些检测鼠标悬停在单个形状上的技术，每一种都有效，但有一些非常严重的警告。

1. 清除的幽灵 Canvas 用于单独绘制一个单独的形状。然后，我使用 getImageData() 存储了 ghost Canvas 的副本。可以想象，当有许多点绑定(bind)了鼠标事件时，这会占用大量内存(960x800 Canvas 上的 100 个可点击形状大约需要 300MB 内存)。

2. 为了回避内存问题，我开始遍历像素数据并仅存储具有非零 alpha 的像素的地址。这对于减少内存很有效，但会显着增加 CPU 负载。我只对每 4 个索引 (RGBA) 进行迭代，并且任何具有非零 alpha 的像素地址都存储为哈希键，以便在鼠标移动期间进行快速查找。它仍然会使 Linux 上的移动浏览器和 Firefox 重载 10 秒以上。

3. 我读到过一种技术，在这种技术中，所有形状都将绘制到一个幽灵 Canvas 上，使用颜色来区分哪个形状拥有每个像素。我对这个想法非常满意，因为理论上它应该能够区分数百万种形状。

   不幸的是，这被抗锯齿破坏了，抗锯齿在大多数 Canvas 实现中都无法禁用。每个模糊边缘都会产生数十种颜色，除了/它们可以与重叠的形状边缘混合/之外，可以安全地忽略这些颜色。当有人将鼠标悬停在形状边界上时，我最不希望发生的事情是为不相关的形状触发半随机鼠标悬停事件，这些形状与由于 AA 混合而出现的颜色相关联。

我知道这对视频游戏开发者来说不是一个新问题，而且必须有针对此类事情的快速算法。如果有人知道可以解决(实际)数百种形状而不占用 CPU 超过几秒钟或显着增加 RAM 消耗的算法，我将非常感激。

还有另外两个关于鼠标悬停检测的 Stack Overflow 主题，都讨论了这个主题，但它们只讨论了我描述的 3 种方法。 Detect mouseover of certain points within an HTML canvas?和 mouseover circle HTML5 canvas .

编辑:2011/10/21

我测试了另一种更动态且不需要存储任何内容的方法，但它因 Firefox 中的性能问题而瘫痪。该方法基本上是遍历形状并:1) 清除鼠标下的 1x1 像素，2) 绘制形状，3) 获得鼠标下的 1x1 像素。令人惊讶的是，这在 Chrome 和 IE 中运行良好，但在 Firefox 下就很糟糕了。

显然，如果您只想要一个小像素区域，Chrome 和 IE 可以进行优化，但 Firefox 似乎根本没有根据所需的像素区域进行优化。也许在内部它会获取整个 Canvas ，然后返回您的像素区域。

此处的代码和原始输出:http://pastebin.com/aW3xr2eB .

最佳答案

如果我对问题的理解正确，您想检测鼠标何时进入/离开 Canvas 上的形状，对吗？

如果是这样，那么您可以使用简单的几何计算，这比在像素数据上循环要简单和快速得多。您的渲染算法已经有了所有可见形状的列表，因此您知道每个形状的位置、尺寸和类型。

假设您有某种形状列表，类似于@Benjammmin' 所描述的，您可以遍历可见形状并进行多边形内点检查:

// Track which shape is currently under the mouse cursor, and raise
// mouse enter/leave events
function trackHoverShape(mousePos) {
    var shape;
    for (var i = 0, len = visibleShapes.length; i < len; i++) {
        shape = visibleShapes[i];
        switch (shape.type ) {
            case 'arc':
                if (pointInCircle(mousePos, shape) &&
                    _currentHoverShape !== shape) {
                        raiseEvent(_currentHoverShape, 'mouseleave');
                        _currentHoverShape = shape;
                        raiseEvent(_currentHoverShape, 'mouseenter');
                    return;
                }
                break;
            case 'rect':
                if (pointInRect(mousePos, shape) &&
                    _currentHoverShape !== shape) {
                       raiseEvent(_currentHoverShape, 'mouseleave');
                       _currentHoverShape = shape;
                       raiseEvent(_currentHoverShape, 'mouseenter');
                }
                break;
        }
    }
}

function raiseEvent(shape, eventName) {
    var handler = shape.events[eventName];
    if (handler)
        handler();
}

// Check if the distance between the point and the shape's
// center is greater than the circle's radius. (Pythagorean theroem)
function pointInCircle(point, shape) {
    var distX = Math.abs(point.x - shape.center.x),
        distY = Math.abs(point.y - shape.center.y),
        dist = Math.sqrt(distX * distX + distY * distY);
    return dist < shape.radius;
}

因此，只需调用 Canvas 中的 trackHoverShape mousemove 事件，它就会跟踪当前鼠标下的形状。

希望对您有所帮助。

关于javascript - HTML5 canvas 的三种鼠标检测技术，都不够，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7799466/