如何模仿 xy 位置的鼠标悬停侦听器

Question

我有一个 snap.svg 网格，包含超过 1600 个 20x20 像素的正方形，我正在尝试找到最有效的跟踪方式，当移动点位于每个正方形内时。我所能想到的就是遍历所有方块寻找 isPointInside ，如下所示：

for (var t = 0; t < numUnits; t++) {
    var square = squares[t];
    if (Snap.path.isPointInside(square, x, y)) {
        hits[t]++;
        break;
    }
}

如果有一种方法可以在每个方块上创建一个事件侦听器（例如鼠标悬停或悬停）来完成这项工作，那肯定会很好。

Answer 1

这可能取决于您想要的准确度，以及从元素中采样是否可行。

如果是这样，您可以使用 elementFromPoint

   var el = document.elementFromPoint(xArray[j]+8,yArray[j]+8);
   Snap(el).attr({ fill: 'red' });

请注意，它与您的不完全匹配但很接近，我猜是由于可能需要考虑的偏移量（我刚试过 8）

jsfiddle

如何模仿 xy 位置的鼠标悬停侦听器

how to mimic mouseover listener for xy positions

snap.svg