Question

我正在尝试创建一个画布，用户可以在其上add background image或background color and write a text。但是，当有背景图像时，我无法显示背景颜色。我创建了一个小提琴来展示一个例子。您可以尝试添加图像并在小提琴中添加颜色按钮。

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

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

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

这是一个有效的演示：
JSBin

Answer 2

将 backgroundImage 属性设置为 null 或 0 作为画布（ canvasRef），在设置背景颜色之前......

＆＃13;

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

＆＃13;

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

＆＃13;

有图像

2 个答案: