javascript - 防止圆在 KineticJS 中闪烁

Question

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

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

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

JSfiddle

Answer 1

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

编辑

我能想到的防止这种情况发生的最好方法是将setVisible(false)代码放入setTimeout调用中，并在调用中设置一个mouseenter事件。mouseoverAnchorclearTimeout

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