我正在尝试创建一个画布,其中用户可以在其上使用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();
})
});
好了,这是正常的。您的背景图片很大,因此它覆盖了背景颜色。你想达到什么目的? – Huangism
我想在图像顶部显示背景颜色,而不是图像顶部的颜色。 – milan
我尝试清除画布上的图像,并选择颜色时显示背景颜色,但这也不起作用。你可以看到pablo.buffer.com在选择颜色时用颜色代替背景图像。这就是我想要的,这是没有发生的。 – milan