Fabric 序列化与反序列化

826 阅读1分钟

序列化主要用于 持久存储,反序列化则主要用于将持久存储的静态内容转换为 Canvas 中可操作的 2d 元素,从而可以实现将某 个时刻画布上的状态还原的目的
如果你的存储够用的话,甚至可以将整个在 Canvas 上的绘制过程进行录制/回放

序列化

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});
canvas.add(rect);
console.log(JSON.stringify(canvas.toJSON()));

反序列化

var canvas = new fabric.Canvas('canvas');
canvas.loadFromJSON('{"objects":[
  {"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null}
]}')

SVG

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});
canvas.add(rect);
canvas.toSVG();