javascript - 鼠标 :over event fires twice in 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 毫秒)并移出，动画将卡住并且卡片将保持在新位置。再次悬停将从这个新位置开始动画。这是fiddle

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

Answer 1

问题在于您的代码在动画操作中发生相对定位变化的方式 - 在 jsFiddle 中，“顶部”值，在上面的代码中，“左”值。

它们的作用是将元素从事件开始的位置移动 +X 或 -X 。如果动画在 mouseout 事件触发之前完成，那就没问题，因为它向后移动的量与 mouseover 事件中移动的量相等(但相反)。

但是，如果鼠标移出的动画在第一个动画完成之前开始，则它会采用其当前位置，而不是动画完成时所处的位置。这会导致元素偏离其原始位置的情况。这肯定是 JSFiddle 中的问题，我从您的评论中了解到，您自己的代码中也存在同样的问题。

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