使用fabric.js修改畫布而不移除現有內容

Question

在我的網頁中有一個包含一些內容的畫布，並且此內容分別呈現（不使用fabric.js）。

我想要做的是使用fabric.js在現有內容之上添加一些內容。 我想這樣做如下（示例代碼），

var canvas = new fabric.Canvas('c'); 
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z'); 
path.set({ left: 120, top: 120 }); 
canvas.add(path); 

但它會刪除從畫布上現有的內容。

你能幫我解決嗎？

Answer 1

使用canvas.toDataURL（）函數由Jason的Maggard的建議：

var c = document.getElementById('c'); 
var ctx = c.getContext("2d"); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(0,0,c.width,c.height); 

var bg = c.toDataURL("image/png"); 

var canvas = new fabric.Canvas('c'); 
canvas.setBackgroundImage(bg,canvas.renderAll.bind(canvas)); 
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z'); 
path.set({ left: 120, top: 120 }); 
canvas.add(path); 

紅色背景仍然應該有你添加fabricjs代碼後還是一樣。如果你想能夠將它移動到/ etc中，你也可以使用canvas.toDataURL（）函數作爲動態圖像的src。

var c = document.getElementById('c'); 
var ctx = c.getContext("2d"); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(0,0,c.width,c.height); 

var img = new Image(); 
img.src = c.toDataURL("image/png"); 

var canvas = new fabric.Canvas('c'); 
var oldCanvas = new fabric.Image(img,{ width: c.width, height: c.height }); 

var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z'); 
path.set({ left: 120, top: 120 }); 

canvas.add(oldCanvas); 
canvas.add(path);