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"

的问候， Benick

Answer 2

试试这个

canvas.setBackgroundImage('add image source', canvas.renderAll.bind(canvas), {
        scaleY: canvas.height ,
        scaleX: canvas.width 
    });

    canvas.renderAll();

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

2 个答案: