防止圆在 KineticJS 中闪烁答案

【问题标题】：Prevent Circle from Flickering in KineticJS防止圆在 KineticJS 中闪烁
【发布时间】：2012-12-10 04:16:20
【问题描述】：

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

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

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

JSfiddle

【问题讨论】：

标签： javascript jquery html canvas kineticjs

【解决方案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 事件放在画布本身上并在那里执行所有需要的计算（进入边界，离开边界，是否显示锚点以及在什么位置)。