画像があるときに背景色が表示されない

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

設定backgroundImageプロパティnullまたはに0キャンバス（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>

Answer 2

ちょうどその背景イメージを削除しています。
FabricJSが新しくなったので、それが最善の方法であるかどうかはわかりません。
しかし、この解決策に動作するようです：ここで

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

が動作デモです：
JSBin