如何重新创建Fabric.js画布?

时间:2013-12-03 07:35:47

标签: javascript json canvas fabricjs

我有一个网站,用户可以在Fabric.js画布中移动图像。我希望能够在更大的画布上重新创建他们的“设计”,所以我的问题是;有什么不同的方法可以使用原始变量重新创建画布?

现在我正在使用JSON.stringify(canvas);来获取数据,但它不是很理想,因为我必须再次复制粘贴变量,它看起来像这样:type":"image","originX":"center","originY":"center","left":135,"top":259,"。有关如何执行此操作的任何建议或是JSON.stringify(canvas);,然后将最简单的所有数据复制粘贴?

1 个答案:

答案 0 :(得分:4)

使用canvas.toJSON()方法创建第一个画布的对象和属性的json对象,然后使用

将该json对象加载到新画布中

canvas.loadFromJSON("your json object");方法。

使用上述方法将对象加载到画布后,调用canvas.renderAll();,您会看到新画布包含原始对象中的所有对象。

您可以选择通过将属性名称数组传递给toJSON()方法来选择要存储在json对象中的属性,可以在此处找到文档:

http://fabricjs.com/docs/fabric.Canvas.html#toJSON