使用 fabric.js 修改画布而不删除现有内容答案

【问题标题】：Modify a canvas using fabric.js without removing existing content使用 fabric.js 修改画布而不删除现有内容
【发布时间】：2015-03-19 17:36:30
【问题描述】：

在我的网页中有一个包含一些内容的画布，并且这些内容是单独呈现的（不使用 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.toDataURL() 导出原始画布以获取可用作新画布背景的 PNG。否则，您必须使用自己的方法将原始画布转换为 JSON。

标签： javascript html canvas fabricjs

【解决方案1】：

按照 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);

【讨论】：

谢谢@Phoenix。是的，我可以为此使用 canvas.toDataURL()。 :)
@Phoenix 由于提取 base64 数据并在画布上再次绘制该数据而导致的性能影响如何？我渲染了近 30 个画布，我需要在每个画布上初始化结构。它需要自己的甜蜜时间来做到这一点，并在此刻为我锁定 fps。有什么建议吗？
@Vinay 我没有在这么多画布上尝试过这样的事情。然而，我在一个画布上尝试了非常多的图像，并且延迟并不漂亮。我很久以前读过一篇文章，其中一位游戏开发人员通过将画布复制到预期大小的一半然后放大来减少移动设备的 fps 问题。根据您的需要（以及帧需要的清晰程度），您可以尝试这样的方法来减少您需要处理的大量数据。您可能还可以查看一些与画布相关的浏览器设置。