FabricJS 지연 도면?

Question

약간의 데모를 설치했습니다. 당신이이 이미지를 그려야 버튼을 클릭하면

var image1 = "http://i.imgur.com/b81Wj6O.png"; 
var image2 = "http://i.imgur.com/vmtt98e.jpg"; 
var backgroundImage; 
var toggle = true; 

document.getElementById("button").addEventListener("click", update); 

var canvas = new fabric.StaticCanvas('canvas', { 
    width: 800, 
    height: 600 
}); 

function update() { 
    var background; 
    if (toggle) { 
     background = image1; 
    } else { 
     background = image2; 
    } 
    toggle = !toggle; 
    if(backgroundImage == null) { 
     fabric.Image.fromURL(background, function(img){ 
     backgroundImage = img; 
     canvas.add(img); 
    }); 
    } 
    else { 
    backgroundImage.setSrc(background); 
    } 
    canvas.renderAll(); 
} 

https://jsfiddle.net/rhLa38dt/

는, 문제가 당신이 버튼을 다시 클릭하면 이미지가 업데이트되지 않는다는 것입니다. 그러나 세 번째로는 두 번째 시간을 가져야하며 한 단계 뒤에서 계속 이미지를 그릴 것입니다.

Answer 1

소스를 설정 한 후 캔버스를 렌더링하는 콜백을 사용

backgroundImage.setSrc(background, function() { 
    canvas.renderAll(); 
}); 

는 JSFiddle, https://jsfiddle.net/rekrah/nzgf1ja4/ 작업 업데이트되었습니다.