fabric.js에서 배경 이미지를 설정하면 클릭시 예외가 발생합니다

Question

fabric.js를 사용하지만 약간의 불안정성이있는 캔버스의 backround 이미지를 설정하려고합니다. 백그라운드를 추가하는 호출은 아무 문제없이 작동하지만 캔버스의 아무 곳이나 클릭하면 빈 상태가되고 선택 모드로 이동하는 것처럼 보입니다. 그러나 이것은 트래핑되지 않은 예외 때문인 것으로 보입니다.

나는 무엇이 문제의 원인인지 알 수 없습니다. 그것은이 페이지 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();