如何重新创建一个 Fabric.js 画布？

Question

我有一个网站，用户可以在Fabric.js画布中移动图像。我想要能够在一个更大的画布中重新创建他们的“设计”，所以我的问题是：使用原始变量重建画布有哪些不同的方法？

目前我正在使用JSON.stringify(canvas);来获取数据，但这不是理想的，因为我必须再次复制粘贴变量，它看起来像这样：type":"image","originX":"center","originY":"center","left":135,"top":259,"。有没有关于如何做到这一点的建议，或者JSON.stringify(canvas);然后复制粘贴所有数据最简单？

- Arco_Pelago

---

“但这并不是理想的，因为我接下来还需要复制粘贴变量。” — 你的意思是什么？ - kangax

@kangax，当你不忙于在每篇布料文章中将f编辑为F时，为什么不检查一下自己问题的答案呢？只是说一下.. :-) - user1693593

@KenFyrstenberg 哈哈，我知道，我知道 :) 一直想着去看看你的答案，但一直忙于其他事情。希望今天能有时间！ - kangax

Answer 1

使用canvas.toJSON()方法创建第一个画布的对象和属性的json对象，然后使用canvas.loadFromJSON("your json object");方法将该json对象加载到新的画布中。

使用上述方法将对象加载到画布后，调用canvas.renderAll();应该可以看到新画布包含了原始画布中的所有对象。

您可以选择将哪些属性存储在您的json对象中，通过将属性名称数组传递给toJSON()方法，这里可以找到文档： http://fabricjs.com/docs/fabric.Canvas.html#toJSON

- Keir Lavelle