Question

我正在尝试在画布上写一个简单的纸牌游戏+ 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中，＆＃34; top＆＃34;值，在上面的代码中，在＆＃34; left＆＃34;值。

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

但是，如果鼠标输出的动画开始在第一个完成之前，则会获取当前位置，而不是它在此时的位置完成动画。这导致元件偏离其原始位置的情况。这肯定是JSFiddle中的问题，我从你的评论中理解，这是你自己的代码中的相同问题。

如何解决？只要您在mouseout事件中使用固定的相对位置值，您可能无法做到。您可以尝试在mouseover函数中记录初始定位（即＆＃34; left / top＆＃34;您开始时的值），并专门返回mouseout事件中的那一点。

Mouse：over事件在Fabric.js

1 个答案: