Fabric.js中图片第二次点击无法重复左移动效问题排查

你的代码里每次点击图片时，都是让它的left属性动画到固定值50。第一次点击时，图片初始left是0，所以会从0移动到50，能看到明显效果；但第一次动画结束后，图片的left已经变成50了，第二次点击时，目标值还是50——和当前值完全一致，Fabric.js会判断这种情况不需要执行动画，所以你看不到任何移动效果。

根据不同的需求场景，这里提供几种实用的解决思路：

思路1：每次点击移动固定距离 #

如果希望每次点击都让图片向某个方向移动一段固定距离（比如每次向右移动50px），可以把目标值改成当前位置加上固定偏移量：

var canvas = new fabric.Canvas('canvas');
canvas.on({
 'object:selected': function(e) {
  // 每次点击让left增加50px，可根据需求改成减少（-50）
  e.target.animate('left', e.target.left + 50, {
   onChange: canvas.renderAll.bind(canvas),
   duration: 100
  });
 }
});
fabric.Image.fromURL('imag/pziiif.gif', function(img) {
 img.set({ left:0, top: 0 });
 canvas.add(img);
});

思路2：在固定位置间来回切换 #

如果就是希望图片在left:0和left:50两个位置间来回切换，每次点击触发一次位置切换，可以通过判断当前位置来设置目标值：

var canvas = new fabric.Canvas('canvas');
canvas.on({
 'object:selected': function(e) {
  // 判断当前left值，切换目标位置
  var targetLeft = e.target.left === 50 ? 0 : 50;
  e.target.animate('left', targetLeft, {
   onChange: canvas.renderAll.bind(canvas),
   duration: 100
  });
 }
});
fabric.Image.fromURL('imag/pziiif.gif', function(img) {
 img.set({ left:0, top: 0 });
 canvas.add(img);
});

思路3：强制重复初始动画 #

如果你的场景需要不管当前位置，每次点击都执行从初始位置（left:0）到50的动画，可以在点击时先重置图片的left到初始值，再启动动画：

var canvas = new fabric.Canvas('canvas');
canvas.on({
 'object:selected': function(e) {
  // 先重置left到0，再动画到50
  e.target.set('left', 0);
  e.target.animate('left', 50, {
   onChange: canvas.renderAll.bind(canvas),
   duration: 100
  });
 }
});
fabric.Image.fromURL('imag/pziiif.gif', function(img) {
 img.set({ left:0, top: 0 });
 canvas.add(img);
});

内容的提问来源于stack exchange，提问作者Vitozz_RDX