在我的网页中有一个包含一些内容的 Canvas ,这些内容是单独呈现的(不使用 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);
但它会从 Canvas 中删除现有内容。
你能帮我解决这个问题吗?
最佳答案
按照 Jason Maggard 的建议使用 canvas.toDataURL() 函数:
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 代码,红色背景仍应存在。您还可以使用 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);
关于javascript - 使用 fabric.js 修改 Canvas 而不删除现有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28063173/