Mouse：over事件在Fabric.js中触发两次

Question

我正在尝试在canvas + Fabricjs上编写一个简单的纸牌游戏。 当鼠标放在上面时，需要制作更大的玩家卡片，如果鼠标不在，则需要恢复到正常大小。 这是我的js代码：

  canvas.on('mouse:over', function(e) {
  if(e.target.mytype && e.target.mytype=='card'){
    e.target.animate({
      top:352,
      left: e.target.left - (max_width - min_width)/2,
      scaleX:0.4,
      scaleY:0.4
    } , {
      duration: 500,
      onChange: function(value) { 
        canvas.renderAll.bind(canvas);
      },
      easing: fabric.util.ease.easeInOut
    }); 
    canvas.renderAll();
  }

}）;

canvas.on('mouse:out', function(e) {
    if(e.target.mytype && e.target.mytype=='card'){
      e.target.animate({
          top:385,
          left: e.target.left + (max_width - min_width)/2,
          scaleX:0.3,
          scaleY:0.3
        } , {
          duration: 500,
          onChange: function(value) { 
            canvas.renderAll.bind(canvas);
          },
          easing: fabric.util.ease.easeInOut
        });
      canvas.renderAll();
    }
  });

如果玩家将卡悬停200毫秒（动画持续时间为500毫秒）并移出，动画将冻结，并且卡将保持在新位置。 再次悬停将从该新位置开始动画。 这是一个小提琴

只需尝试将鼠标移入/移出对象，您就会看到错误。 请帮我解决这个问题。

Answer 1

问题是您的代码在动画动作中具有相对位置更改的方式-在jsFiddle中，“ top”值在上面的代码中在“ left”值中。

这些操作的唯一作用是将元素+ X或-X 从事件开始的位置移开。 如果动画在触发mouseout事件之前完成，那很好，因为它向后移动的数量等于（但相反）在mouseover事件中移动的数量。

但是，如果用于mouseout的动画在第一个动画完成之前开始，它将采用当前位置，而不是动画完成时所在的位置。 这导致元件偏离其原始位置的情况。 当然，这就是JSFiddle中的问题，我从您的评论中了解到，这在您自己的代码中是相同的问题。

怎么解决呢？ 只要您在mouseout事件中使用固定的相对位置值，就可能不会。 您可以尝试在mouseover函数中记录初始位置（即，您从其开始的“左/上”的值），并在mouseout事件中专门返回到该点。