防止圓在KineticJS中閃爍

Question

當用戶將鼠標光標放置在多邊形的輪廓上/附近時，應出現錨點並沿着鼠標的位置，但捕捉到多邊形的輪廓。

問題：當處理函數mousemove更新此錨點的位置時，錨點似乎閃爍。什麼導致閃爍和更新緩慢？ KineticJS示例here似乎更新得非常快。

此外，錨點不會捕捉到多邊形的輪廓/筆觸。這個效果如何實現？

JSfiddle

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