重新渲染fabric.js后画布背景变黑

Question

我有以下情况：我用背景图像绘制画布，这很有效：

var canvasSection = new fabric.Canvas('buildSection', {
  selectionColor: 'rgba(94,213,94,0.2)',
  width: widthS,
  height: heightS,
  hoverCursor: 'pointer',
  backgroundColor: ({
    source: 'image/bordenconfigurator/background/background1.png',
    repeat: 'repeat'
  })

});

但是我需要清除画布并重新绘制它。此时，当我尝试设置背景时，我看到的不是图像而是黑屏。在控制台中，我可以看到背景图像已设置。这是我正在尝试的代码：

$('#cForm').on('change', function() {

  if ($(this).val() == 'rectLandsc') {
    widthS = 600;
    heightS = 400;

  } else if ($(this).val() == 'rectPortr') {
    ....

  }
  canvasSection.clear();

  canvasSection.set({
    fill: 'rgba(0,0,0,0)',
    //  backgroundColor: ({source: 'image/bordenconfigurator/background/background1.png', repeat: 'repeat'})
  });
  //canvasSection.backgroundColor({source: 'image/bordenconfigurator/background/background.png', repeat:'repeat'});
  canvasSection.setBackgroundColor({
      source: 'image/bordenconfigurator/background/background.png'
    }),
    canvasSection.renderAll.bind(canvas);
  drawBaseForm();
  canvasSection.renderAll();

  console.log(canvasSection);
});

这是一种错误吗？还是我做错了什么？有谁能帮帮我吗？

Answer 1

canvas.setBackgroundColor({
  source: 'image/bordenconfigurator/background/background1.png',
  repeat: 'repeat'
}, canvas.renderAll.bind(canvas));

setBackgroundColor 第一个参数是颜色/图案，第二个参数是回调函数。

演示

var canvas = new fabric.Canvas('c');
canvas.setBackgroundColor({
  source: 'http://fabricjs.com/assets/pug_small.jpg'
}, canvas.renderAll.bind(canvas));

function clearCanvas(){
 var background = canvas.backgroundColor;
 canvas.clear();
 setTimeout(function(){
  canvas.setBackgroundColor(background,canvas.renderAll.bind(canvas));
 },2000)
}

canvas{
 border: 2px dotted black;
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='clearCanvas()'>clear</button>
<canvas id="c" width="500" height="500"></canvas>