在fabric.js中设置背景图像会在单击时引发异常

Question

我试图使用fabric.js设置更改画布的背景图像,但遇到一些不稳定.添加背景调用工作,没有麻烦,但如果我然后单击画布上的任何地方它一片空白,似乎转移到选择模式 - 虽然这只是似乎是由于未捕获的异常.

我无法弄清楚导致这种行为的原因.它在这个页面http://fabricjs.com/customization/上工作正常,但是下面的jsfiddle失败了http://jsfiddle.net/YH9yD/20/

var canvas = window._canvas = new fabric.Canvas('c');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});
this.__canvases.push(canvas);

Answer 1

尝试在添加到画布之前加载图像.如果你添加一个尚未加载的图像,你将获得一个例外.这对我们有用:

var img = new Image();
img.onload = function(){
   canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
            originX: 'left',
            originY: 'top',
            left: 0,
            top: 0
        });
};
img.src = "your image source"

问候,贝尼克