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

Question

I'm trying to write a simple card game on canvas + Fabricjs. Need to make bigger player's card when mouse is on it and return to normal size if mouse is out. Here is my js code:

  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();
    }
  });

if player hover the card for 200ms (animation duration is 500ms) and move out, the animation freeze and the card remains at a new position. Hovering again wil start animation from this new position. Here is a fiddle

Just try to move mouse in/out on the object and you'll see the bug. Please, help me to fix this.

Answer 1

The problem is the way that your code has relative positioning changes within the animation action - in the jsFiddle, the "top" value, in your code above, in the "left" value.

What each of these do is move the element +X or -X from the position the event starts at . If the animation finishes before the mouseout event is fired, it's fine, because the amount it moves back is equal (but opposite) to the amount it moved in the mouseover event.

However, if the animation for mouseout starts Before the first is finished , it takes it's current position, not the position it will be at when it finishes the animation. This leads to a situation where the element drifts away from its original position. This is certainly what the issue is in the JSFiddle, I understand from your comments that this is the same issue in your own code.

How to resolve it? As long as you are using a fixed relative position value in the mouseout event you probably can't. You could try logging the initial positioning (ie, the value of "left/top" you started at) in the mouseover function and returning specifically to that point in the mouseout event.