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

Question

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

我正在使用结构 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

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

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

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

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

直到现在function B才能访问原始fabric.Canvas.prototype.add。

回到你的代码段，注意你期望object, callbackfunction 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);

请注意 rest 参数...args的用法，因为add()应该处理多个对象作为参数。我在第一个传递的对象上调用animate()，因此您可能希望更改它。

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