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/

あなたはそれが画像を描画するボタンをクリックした場合、私がいる問題は、ボタンをもう一度クリックすると、画像が更新されないということです。しかし、3回目は2度目の画像を描画し、そこから1ステップ遅れて続けます。 JSFiddle、https://jsfiddle.net/rekrah/nzgf1ja4/作業更新

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

：

Answer 1

は、そのソースを設定した後、キャンバスをレンダリングするためにコールバックを使用してください。