如何在fabric js中覆盖canvas.add()方法

Question

我正在使用一个图像编辑器，我想在其中将图像添加到带有动画的画布中。 我尝试覆盖 canvas.add() 方法但无法播放动画。

我使用的是 Fabric js 版本 1.7.22。 当我尝试谷歌搜索时。我找到了一种使用动画添加对象的解决方案，但在那个演示中，他们使用自定义新方法“fxadd()”来添加对象。

这里是参考链接： https://github.com/fabricjs/fabric.js/issues/77

但是我的代码太长了，根本不想替换函数名。 有什么方法可以覆盖现有的面料 canvas.add() 方法然后请帮助我。

fabric.Canvas.prototype.add = (function(object, callback) {
  return function() {
    console.log('add into canvas', this);
    this.add(object); // here call self method which result in infinit loop
    object.animate('top', '100', {
      onChange: this.renderAll.bind(this),
      duration: 1000,
      easing: fabric.util.ease.easeOutElastic,
      onComplete: function() {}
    });
  };
})(fabric.Canvas.prototype.add);

var canvas = new fabric.Canvas('canvas1')
var btn = document.getElementById('animate');

btn.addEventListener('click', function() {
  canvas.clear();
  setTimeout(function() {
    run();
  }, 800);
});
var run = function() {
  var rect = new fabric.Rect({
    left: 50,
    top: 10,
    fill: 'red',
    width: 100,
    height: 100,
  });

  canvas.add(rect)
}

Answer 1

看起来您正在尝试使用闭包覆盖原型方法，这通常是一种聪明的方法，只是它在您的 sn-p 中没有完全正确地完成。考虑一下您使用的构造的简化版本：

fabric.Canvas.prototype.add = (function A(argA) {
  return function B(argsB){
    //..
  }
})(fabric.Canvas.prototype.add)

在这里您调用function A，将fabric.Canvas.prototype.add 作为参数传递。这将创建一个闭包，将原始的 fabric.Canvas.prototype.add 保留在 function A 的范围内。然后，您将分配任何function A 返回给fabric.Canvas.prototype.add。实际上，这转化为

fabric.Canvas.prototype.add = function B(argsB){ /*... */}

现在只有function B 可以访问原来的fabric.Canvas.prototype.add。

回到你的 sn-p，注意你是如何期望 object, callback 作为 function A 的参数而在 function B 中没有参数 - 这没有任何用处（见上文）。此外，当您拨打this.add() 时 - 这是您应该拨打原始 add() 而不是新 的地方。否则，您将获得无限递归。

---

话虽如此，以下是正确的做法：

fabric.Canvas.prototype.add = (function(originalFn) {
  return function(...args) {
    originalFn.call(this, ...args)
    args[0].animate('top', '100', {
        onChange: this.renderAll.bind(this),
        duration: 1000,
        easing: fabric.util.ease.easeOutElastic,
        onComplete: function () {
        }
    });
    return this
  };
})(fabric.Canvas.prototype.add);

注意其余参数...args 的用法，因为add() 应该将多个对象作为参数处理。我在第一个传递的对象上调用 animate()，所以你可能想要更改它。

另外，不要忘记原始的 add() 应该返回 fabric.Canvas 的实例以使链接工作，因此最后是 return this。