FabricJS延迟绘图？答案

【问题标题】：FabricJS delayed drawing?FabricJS延迟绘图？
【发布时间】：2017-02-27 07:09:22
【问题描述】：

我设置了一个小演示。

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/

如果您单击按钮，它应该绘制图像，我遇到的问题是，当您再次单击该按钮时，图像不会更新。然而，第三次它会绘制它应该第二次绘制的图像，并从那里继续，总是落后 1 步。

【问题讨论】：

标签： fabricjs

【解决方案1】：

设置来源后使用回调渲染画布：

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

更新了工作 JSFiddle，https://jsfiddle.net/rekrah/nzgf1ja4/。

【讨论】：