Javascript 防止圆在KineticJS中闪烁

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

问题：当

mousemove

处理程序函数更新锚的位置时，锚似乎会闪烁。是什么导致了闪烁和缓慢的更新？KineticJS示例似乎更新得非常快

此外，定位点未捕捉到多边形的轮廓/笔划。如何达到这一效果

---

您的

mousemove

功能正在移动定位点。移动锚后，鼠标不再位于

polyHitArea

上方，因此

mouseleave

事件将触发并隐藏锚

编辑

我能马上想到的防止这种情况发生的最好方法是将

setVisible（false）

代码放入

setTimeout

调用中，并在

mouseoverAnchor

调用

cleartimout

上设置一个

mouseenter

事件

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);
});

---

这很有道理！是否有方法防止锚触发

mouseleave

事件？我试着用鼠标出了同样的问题。谢谢Jason。我尝试了一下，闪烁的停止了，但是当我沿着正方形的边缘移动鼠标时，锚并没有跟随鼠标的位置。锚点仅在鼠标退出锚点时更新其位置，希望锚点能够平滑地跟踪鼠标位置，但约束到正方形的边缘。jsfiddle.net/yZFFJ/8听起来您需要将

mousemove

事件放在画布上，并在画布上执行所有需要的计算（输入边界、离开边界、是否显示锚点以及在什么位置）。