在KineticJS中防止圆圈闪烁

Question

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

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

此外，锚点没有捕捉到多边形的轮廓/笔划。如何实现这种效果？

JSfiddle

Answer 1

您的mousemove功能正在移动锚点。移动锚点后，鼠标不再位于polyHitArea上方，因此您的mouseleave事件正在触发并隐藏锚点。

修改

我可以想到的最好的方法是将setVisible(false)代码放入setTimeout调用 - 并在mouseenter上发生mouseoverAnchor事件{1}}致电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);
});