KineticJS에서 서클의 깜박임 방지

Question

사용자가 마우스 커서를 다각형의 윤곽선 위에 놓으면 앵커가 나타나고 마우스 위치를 따라 가면서 다각형의 윤곽에 스냅해야합니다.

문제점 :mousemove 처리기 함수가이 앵커의 위치를 ​​업데이트하면 앵커가 깜박입니다. 깜박임과 느린 업데이트의 원인은 무엇입니까? KineticJS 예제 here은 꽤 빨리 업데이트됩니다.

또한 앵커가 다각형의 윤곽선/획에 스냅되지 않습니다. 이 효과는 어떻게 달성 될 수 있습니까?

JSfiddle

는

Answer 1

귀하의 mousemove 기능은 앵커를 이동합니다. 앵커가 움직이면 마우스는 더 이상 polyHitArea을 넘지 않으므로 mouseleave 이벤트가 발생하여 앵커가 숨어 있습니다. 그리고 mouseoverAnchor 전화 clearTimeout에 mouseenter 이벤트가 -

편집

나는 이런 일이 발생을 방지하기 위해 왼손 생각할 수있는 가장 좋은 방법은 setTimeout 전화로 setVisible(false) 코드를 삽입하는 것입니다.

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