javascript - 拉斐尔:将模糊的点放在前面

Question

我在 Canvas 上有一堆拉斐尔圆形物体，在许多情况下它们重叠，有时一个较小的圆圈被位于其顶部的较大圆圈完全覆盖。在这种情况下，我希望当鼠标悬停在较小的圆圈上时，或者更准确地说，当鼠标悬停在它包含的坐标上时，将较小的圆圈向前移动。

我一直在尝试将 getElementsByPoint() 方法作为 mousemove 处理程序的一部分，但发现它的性能非常缓慢。

有什么技巧或窍门可以在拉斐尔 Canvas 上突出被覆盖或模糊的点吗？

提前致谢。

Answer 1

您可以创建一个覆盖蒙版作为透明矩形，覆盖整个 Canvas 区域，其中包含每个形状的路径坐标，并将形状作为处理程序附加到其上。

为此，您需要创建自定义事件，以便触发叠加 mask 和捕捉形状，我们将它们称为“shape-coor-over”和“shape-coor-”出”。

此掩码将充当中介:它将监听鼠标移动，并在某些条件下触发 shape-coor-over 和 shape-coor-out 自定义事件(如果鼠标已进入路径区域等)，当通知注册的形状时，它们的处理程序将相应地调用形状的 toFront() 或 toBack() 。