javascript - 防止圆圈在 KineticJS 中闪烁

Question

当用户将鼠标光标放在多边形的轮廓上/附近时，应出现一个 anchor 并跟随鼠标的位置，但会捕捉到多边形的轮廓。

问题:当 mousemove 处理函数更新此 anchor 的位置时， anchor 似乎会闪烁。是什么导致闪烁和缓慢更新？ KineticJS 示例 here似乎更新得很快。

此外， anchor 不会捕捉到多边形的轮廓/笔画。怎样才能达到这样的效果？

JSfiddle

Answer 1

您的 mousemove 函数正在移动 anchor 。移动 anchor 后，您的鼠标不再位于 polyHitArea 上，因此您的 mouseleave 事件将触发并隐藏 anchor 。

编辑

我能立即想到的防止这种情况发生的最佳方法是将 setVisible(false) 代码放入 setTimeout 调用中 - 并进行mouseoverAnchor 上的 mouseenter 事件调用 clearTimeout。

var polyHitArea._timeout = 0;

polyHitArea.on('mouseover', function(e) {
    clearTiemout(polyHitArea._timeout);
    mouseoverAnchor.setVisible(true);
    stage.draw();
});

polyHitArea.on('mouseleave', function(e) {
    clearTimeout(polyHitArea._timeout);
    polyHitArea._timeout = setTimeout(function(){
        mouseoverAnchor.setVisible(false);
    }, 25); // 25 ms enough time?
    stage.draw();
});

mouseoverAnchor.on('mouseenter', function(e) {
    clearTimeout(polyHitArea._timeout);
});