setBackgroundImage 无法按预期使用多个功能答案

【问题标题】：setBackgroundImage not working as expected with multiple functionssetBackgroundImage 无法按预期使用多个功能
【发布时间】：2018-12-17 17:55:14
【问题描述】：

我正在尝试关注the Fabric.js tutorial 到setBackgroundImage 到我与按钮相关联的几张图片之一，并且有点奇怪。基本上，按钮 1 和 3 都很慢/无响应/需要两次单击才能生效，并且按钮 2 不想在本地或通过 Imgur 加载。无论如何，我正在使用 Fabric.js v. 1.7.22 和 jQuery 3.3.1。

var canvas = new fabric.Canvas('canvas');

canvas.setHeight(400);
canvas.setWidth(400);

$("#one").click(function(event) {
  canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png');
  canvas.renderAll();
});

$("#two").click(function(event) {
  canvas.setBackgroundImage('https://i.imgur.com/4Ut8gsw.png');
  canvas.renderAll();
});

$("#three").click(function(event) {
  canvas.setBackgroundImage('https://i.imgur.com/2S08Y3b.jpg');
  canvas.renderAll();
});

canvas {
  border: 1px solid #dddd;
}

button {
  margin-top: 20px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>

<canvas id="canvas"></canvas>
<button id="one">
One
</button>

<button id="two">
Two
</button>

<button id="three">
Three
</button>

这里发生了什么？提前致谢。

【问题讨论】：

标签： javascript jquery fabricjs

【解决方案1】：

setBackgroundImage 接受三个参数。

网址
回调
图像选项。

在回调中调用renderAll()。

var canvas = new fabric.Canvas('canvas');

canvas.setHeight(400);
canvas.setWidth(400);

$("#one").click(function(event) {
  canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png',function(){
   canvas.renderAll();
  },{
   width:canvas.width,
   height:canvas.height
  });
});

$("#two").click(function(event) {
  canvas.setBackgroundImage('https://i.imgur.com/4Ut8gsw.png',function(){
   canvas.renderAll();
  },{
   width:canvas.width,
   height:canvas.height
  });
});

$("#three").click(function(event) {
  canvas.setBackgroundImage('https://i.imgur.com/2S08Y3b.jpg',function(){
   canvas.renderAll();
  },{
   width:canvas.width,
   height:canvas.height
  });
});

canvas {
  border: 1px solid #dddd;
}

button {
  margin-top: 20px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>

<canvas id="canvas"></canvas>
<button id="one">
One
</button>

<button id="two">
Two
</button>

<button id="three">
Three
</button>

【讨论】：