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);
});

这是一种bug吗？或者我做错了什么？有人可以帮帮我吗？

Answer 1

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

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

<强> 样本

＆＃13;

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)
}

＆＃13;

canvas{
 border: 2px dotted black;
}

＆＃13;

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

＆＃13;

rerender fabric.js后，画布背景变黑

1 个答案: