javascript - setBackgroundImage 无法按预期使用多个功能

Question

我正在尝试关注 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>

这是怎么回事？提前致谢。

Answer 1

setBackgroundImage接受三个参数。

1. 网址
2. 回调
3. 图片选项。

在回调中调用 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>