在fabric.js中設置背景圖片點擊時會拋出異常

我正在嘗試使用fabric.js更改canvas的背景圖片，但運行時會出現一些不穩定情況。添加背景的調用沒有任何問題，但如果隨後在畫布上單擊任何位置，它將變爲空白，並且似乎移至選擇模式 - 儘管這似乎是由於未處理的例外。在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);

來源

2014-04-14 Andrew Rutter

檢查出棧此引用鏈接http://stackoverflow.com/questions/22877846/scale-canvas-background-image-dynamically-using-面料-Js –

嘗試加載圖像添加到畫布前。如果你添加一個沒有加載的圖像，你會得到一個異常。這爲我們工作：

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

來源

2014-04-16 08:19:08 Benick

我發現將圖像移動到同一個域中可以解決問題，但根據我所看到的行爲，上述答案似乎完全有效 - 並允許從不同域中提取圖像。 –

該解決方案適用於我。我們必須在添加到畫布之前加載圖像 –

試試這個

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

    canvas.renderAll();

來源

2014-04-15 05:37:34

對不起，但這個問題似乎是面料的內部。以下鏈接來自setBackgroundImage（）函數（http://fabricjs.com/docs/fabric.Canvas.html）上的文檔，請參閱http://jsfiddle.net/fabricjs/YH9yD/，它以同樣的方式失敗。 –

在fabric.js中設置背景圖片點擊時會拋出異常

回答

相關問題