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/。

FabricJS延迟绘图？

1 个答案: