自己呼び出し機能ファブリックプロトタイプはいけない仕事

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と定義されていません。 How to access the correct `this` context inside a callback?を参照してください。

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