javascript - RaphaelJS：在悬停和移动元素时消除闪烁

Question

我在 Raphael JS 和一般 SVG 上都是新手。目前我在地图功能上使用 SVG 和 Raphael。

我遇到了悬停效果的问题，它会将您悬停的给定元素偏移 10 像素。但是，如果您将鼠标缓慢移动到元素中，则 hoverIn 和 hoverOut 会发生很多次，导致闪烁。

我想我可以通过克隆国家并在悬停时将其隐藏和固定来解决这个问题。我可以这么说，因为地图包含数百种形状......

方法是什么？我应该怎么办？

Answer 1

如果我理解正确，当您将鼠标悬停在元素上时元素会移动，这会导致 hoverOut 事件。你想用缓慢的鼠标移动发生什么？它移动一次，一直移动直到鼠标进入？

您需要在元素上设置一个变量以显示它何时移动了 10 像素。然后你可以做类似（伪代码）

hoverIn() { 
    if (isShifted) {
        inWhenShifted = true  
    } else {
        // offset element
        isShifted = true
    } 

hoverOut() {
    if (isShifted) { 
         if (inWhenShifted) {
             // put element back
             isShifted = false
             inWhenShifted = false
         } else {
             // do nothing?, this is the case where the hoverOut fired 
             // because we moved the element
         }
    } else {
        // do nothing?, this is the case where we hoverOut again after shifting
        // the element back
    }
}