Mouse:over 事件在 Fabric.js 中触发两次答案

【问题标题】：Mouse:over event fires twice in Fabric.jsMouse:over 事件在 Fabric.js 中触发两次
【发布时间】：2015-12-11 01:15:15
【问题描述】：

我正在尝试在 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 毫秒）并移出，动画将冻结并且卡片将保持在新位置。再次悬停将从这个新位置开始动画。这是fiddle

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

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

问题在于您的代码在动画动作中具有相对定位变化的方式 - 在 jsFiddle 中，“top”值，在您上面的代码中，在“left”值中。

它们的作用是将元素 +X 或 -X 从事件开始的位置移动。如果动画在 mouseout 事件触发之前结束，那很好，因为它向后移动的量与它在 mouseover 事件中移动的量相等（但相反）。

但是，如果 mouseout 动画开始在第一个完成之前，它会采用当前位置，而不是结束动画时的位置。这会导致元素偏离其原始位置的情况。这肯定是 JSFiddle 中的问题，我从您的 cmets 了解到这与您自己的代码中的问题相同。

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

【讨论】：