自调用函数结构原型不起作用

Question

(function (window, $, undefined){
'use strict';

// Main canvas
var mainCanvas = new fabric.Canvas("imageCanvas");

function UpdateCanvas(){
this.canvas = mainCanvas;
}
UpdateCanvas.prototype.img = function (src){
  this.canvas.clear();
  fabric.Image.fromURL(src, function(oImg) {
    oImg.setWidth(500);
    oImg.setHeight(400);
    oImg.left = ((this.canvas.width/2)-(oImg.width/2));
    oImg.top = 50;
    oImg.selectable = false;
    this.canvas.add(oImg);
    this.canvas.renderAll();
  });
}

})(window, jQuery);

错误：

ncaught TypeError: Cannot read property 'canvas' of undefined
    at design-application.js:30
    at fabric.min.js:5
    at HTMLImageElement.i.onload (fabric.min.js:1)

我

的目的是在我的织物函数中使用原型，但它一直有问题，我无法让它显示在我的画布上。 我想可能是因为我正在使用自调用函数。

有没有办法将我的变量放在自调用函数中，我可以在我的原型函数结构中访问它。

Answer 1

你的问题是在fabric.Image.fromURL()的回调中，this没有被定义为UpdateCanvas。请参阅如何在回调中访问正确的"this"上下文？。

将变量设置为等于回调函数之外的this，就像在 JSFiddle 中一样将解决您的问题。或者，您可以在回调上使用绑定来绑定不同的this

工作代码：

(function (window, $, undefined){
'use strict';

// Main canvas
var mainCanvas = new fabric.Canvas("imageCanvas");
function UpdateCanvas(){
this.canvas = mainCanvas;
}
UpdateCanvas.prototype.img = function (src){
  this.canvas.clear();
    var that = this;
  fabric.Image.fromURL(src, function(oImg) {
    oImg.setWidth(500);
    oImg.setHeight(400);
    oImg.left = ((that.canvas.width/2)-(oImg.width/2));
    oImg.top = 50;
    oImg.selectable = false;
    that.canvas.add(oImg);
    that.canvas.renderAll();
  });
};
var test = new UpdateCanvas(mainCanvas);
test.img("https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png");
})(window);