Jquery 自调用函数结构原型不起作用
错误:Jquery 自调用函数结构原型不起作用,jquery,html5-canvas,fabricjs,Jquery,Html5 Canvas,Fabricjs,错误: (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(); fa
(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);
我的意图是在我的织物功能中使用原型,但它一直有问题,我不能让它显示在我的画布上。我想可能是因为我使用了自调用函数
有没有办法将我的变量放在自调用函数中,我可以在原型函数结构中访问它。您的问题是在
fabric.Image.fromURL()
的回调中,此
未定义为UpdateCanvas
。看
在回调函数外设置一个等于此的变量(如中),可以解决问题。或者,您也可以在回调中使用来绑定不同的此
工作代码:
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)
(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);