有图像时不显示背景颜色

Question

我正在尝试创建一个 canvas，用户可以在其中 add background image 或 background color and write a text。但是，当有背景图像时，我无法显示背景颜色。我创建了一个 fiddle 来展示示例。您可以尝试在 fiddle.

中添加图像和添加颜色按钮

http://jsbin.com/sukuvoqahi/edit?html,js,output

这是我的代码

const canvasRef = new fabric.Canvas('canvas');

const addImage = document.querySelector('#addImage');

const addBackgroundColor = document.querySelector('#addBackgroundColor');

addImage.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('image');
  canvasRef.setBackgroundImage('https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg', () => {
    canvasRef.renderAll();
  });
});

addBackgroundColor.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('color');
  canvasRef.setBackgroundColor('rgb(100,100,100)', () => {
    canvasRef.renderAll();
  })
});

Answer 1

只需删除背景图像。
我是 FabricJS 的新手，所以我不确定这是否是最好的方法。
但这个解决方案似乎有效：

canvasRef.setBackgroundImage(null) => {
    canvasRef.renderAll();
});
canvasRef.setBackgroundColor('rgb(100,100,100)', () => {
    canvasRef.renderAll();
});

这是一个工作演示：
JSBin

Answer 2

将backgroundImage属性设置为null或0 for the canvas (canvasRef), 在设置背景色之前...

const canvasRef = new fabric.Canvas('canvas');

const addImage = document.querySelector('#addImage');

const addBackgroundColor = document.querySelector('#addBackgroundColor');

addImage.addEventListener('click', (e) => {
   e.preventDefault();
   console.log('image');
   canvasRef.setBackgroundImage('https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg', () => {
      canvasRef.renderAll();
   });
});

addBackgroundColor.addEventListener('click', (e) => {
   e.preventDefault();
   console.log('color');
   canvasRef.backgroundImage = null; //or set 0
   canvasRef.setBackgroundColor('rgb(100,100,100)', () => {
      canvasRef.renderAll();
   })
});

<canvas id="canvas" width="350" height="350" style="border:1px solid #000000">
</canvas>
<button id="addImage">Add Image</button>
<button id="addBackgroundColor">Add Color</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>

有图像时不显示背景颜色

background color not shown when there is image

javascript

fabricjs