javascript - 有图像时不显示背景颜色

Question

我正在尝试创建一个 Canvas ，用户可以在其中添加背景图像或背景颜色并在其上写入文本。但是，当有背景图像时，我无法显示背景颜色。我创建了一个 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

设置 backgroundImage 属性为 null 或 0 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>