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

Question

我正在尝试在 canvas + Fabricjs 上编写一个简单的纸牌游戏。当鼠标在上面时需要制作更大的玩家卡片，如果鼠标不在上面则 return 到正常大小。这是我的 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

只需尝试在对象上移动鼠标 in/out，您就会看到错误。请帮我解决这个问题。

Answer 1

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

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

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

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

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

Mouse:over event fires twice in Fabric.js

javascript

fabricjs