防止圆在 KineticJS 中闪烁

Posted 2023-03-05

【中文标题】防止圆在 KineticJS 中闪烁

【英文标题】：Prevent Circle from Flickering in KineticJS

【发布时间】：2012-12-10 04:16:20

【问题描述】：

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

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

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

JSfiddle

【参考方案1】：

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

编辑

我能想到的防止这种情况发生的最好方法是将setVisible(false) 代码放入setTimeout 调用中——并在mouseoverAnchor 调用clearTimeout 上设置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 事件？我尝试了mouseout 并遇到了同样的问题。

谢谢杰森。我试了一下，闪烁停止了，但是当我沿着正方形的边缘移动鼠标时，锚点没有跟随鼠标位置。锚点仅在鼠标退出锚点时更新其位置，希望锚点能够平滑地跟踪鼠标位置但受限于正方形的边缘。 jsfiddle.net/yZFFJ/8

听起来您需要将 mousemove 事件放在画布本身上并在那里执行所有需要的计算（进入边界，离开边界，是否显示锚点以及在什么位置)。