html5-canvas - Kineticjs 重叠形状鼠标悬停检测

Question

是否有一种简单的方法可以对 kineticjs 中的多个重叠形状进行鼠标悬停检测（或者 rapheljs，如果这在 SVG 中更容易）。即，如果我有两个部分重叠的圆圈，我想以某种方式检测四种情况：

1) 在没有形状时 2) 在圆 A 上时 3) 在圆 B 上时 4) 当在圆 A 和 B 上（重叠）时

但我需要一个可以扩展到“n”个圆圈/形状的通用实现。

干杯

score 5 · Accepted Answer

是的，只需使用 getIntersections 方法：

这将返回与给定点相交的所有 KineticJS 节点（例如鼠标位置）

干杯!

score 2 · Accepted Answer

要解决这个问题，您显然要处理碰撞检测。碰撞检测算法因您要检查的形状而异。

因此，首先，您可以使用 lineTo、arc 等方法并使用内置的方法isPointInPath进行检测，并传入鼠标坐标。这是最简单的方法，尤其是形状奇特的多边形

    if (ctx.isPointInPath(20,50))
    {
        // code
    }

2 回答 2