Selbst Funktion aufrufen Stoff Prototyp nicht

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

Fehler arbeiten:

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) 

meine Absicht ist, Prototyp in meiner Stoff-Funktion zu verwenden, aber es hält Problem mit und ich kann es auf meiner Leinwand machen zeigen. Ich denke, vielleicht, weil ich Self-Invoke-Funktion verwende.

gibt es eine Möglichkeit, meine Variable auf Self-Invoke-Funktion zu setzen, und ich kann auf meine Prototyp-Funktion Fabric zugreifen.

Answer 1

Ihr Problem besteht darin, dass in Ihrem Rückruf für fabric.Image.fromURL()this nicht als UpdateCanvas definiert ist. Siehe How to access the correct `this` context inside a callback?.

Die Einstellung einer Variablen auf this außerhalb Ihrer Callback-Funktion wie in this JSFiddle wird Ihr Problem beheben. Alternativ können Sie bind auf Ihrem Rückruf verwenden einen anderen this

Arbeits Code zu binden:

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