Предотвращение мерцания круга в KineticJS

Когда пользователь помещает курсор мыши над / рядом с контуром многоугольника, должна появиться привязка и следовать за положением мыши, но с привязкой к контуру многоугольника.

Проблема: кажется, что привязка мерцает, когда функция обработчика mousemove обновляет положение этой привязки. Что вызывает мерцание и медленное обновление? Пример KineticJS, здесь, кажется, обновляется довольно быстро.

Кроме того, привязка не привязана к контуру / обводке многоугольника. Как можно добиться этого эффекта?

JSfiddle


javascript canvas html jquery kineticjs
person Nyxynyx    schedule 23.12.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваша mousemove функция перемещает якорь. Как только якорь перемещен, ваша мышь больше не находится над polyHitArea, поэтому ваше событие mouseleave запускается и скрывает якорь.

Изменить

Лучший способ, который я могу придумать для предотвращения этого, - это поместить код setVisible(false) в вызов setTimeout и иметь событие mouseenter в вызове mouseoverAnchor 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);
});
person Jason Whitted    schedule 23.12.2012
comment
В этом есть большой смысл! Есть ли способ предотвратить запуск привязки события mouseleave? Я попробовал mouseout и получил ту же проблему. - person Nyxynyx; 23.12.2012
comment
Спасибо Джейсону. Я попробовал, и мерцание прекратилось, но якорь не следует за положением мыши, когда я перемещаю мышь по краю квадрата. Якорь обновляет свое положение только тогда, когда мышь покидает якорь, надеялся на якорь, который плавно отслеживает положение мыши, но ограничен краем квадрата. jsfiddle.net/yZFFJ/8 - person Nyxynyx; 23.12.2012
comment
Похоже, вам нужно будет поместить свое mousemove событие на самом холсте и выполнить все необходимые вычисления там (ввод границ, выход из границ, отображение привязки и в каком месте). - person Jason Whitted; 23.12.2012