fabric笔记-序列化和反序列化，SVG解析器

组合

var circle=new fabric.Circle({
	radius:100,
	fill:'red',
scaleY:0.5,//Y轴方向上压缩
originX:'center',
originY:'center'
})
var text2=new fabric.Text('hellow world',{
	fontSize:30,
originX:'center',
originY:'center' //两个一起实现组内居中
})
var group=new fabric.Group([circle,text2],{
	left:100,
	top:100,
	angle:-10
})
canvas.add(group)

现在在画布上就有了一个组

组内元素样式的更改

可以通过item（）方法访问组中的单个最想，并修改他们的属性

group.item(0).set('fill','blue')//group.item(0)这个元素取到的就是circle
group.item(1).set({
	text:'trolo',
	fill:"white",
	originX:'left'
})

通过指定left和top的坐标，来更改元素的位置

var circle1=new fabric.Circle({
	radius:50,
	fill:"red",
	left:0
})
var circle2=new fabric.Circle({
	radius:50,
	fill:"green",
	left:100
})
var circle3=new fabric.Circle({
	radius:50,
	fill:"yellow",
	left:200
})
var group2=new fabric.Group([circle1,circle2,circle3],{
	left:50,
	top:100
})
canvas.add(group2)

##序列化
将画布导出图像，但是上传图片到服务器相当占用带宽。因此有序列化和反序列化

toObject,toJSON–序列化

toJSON

		<button onclick="loadJson()"> 序列化</button>
function loadJson(){
	console.log(JSON.stringify(canvas));
}

JSON.stringify(canvas)方法在传递的对象上隐式调用toJSON方法（如果存在），fabric中的canvas实例具有toJSON方法，因此等同于JSON.stringify(canvas.toJSON())

返回的字符串代表空canvas。它采用JSON格式，并且基本上由“objects”和“background”属性组成。 “objects”当前为空，因为画布上没有任何内容，并且背景具有默认的透明值（“ rgba（0，0，0，0）”）

新添加的对象，现在是“objects”数组的一部分，序列化为JSON
它的表示方式包含了它的所有视觉特征-左、上、宽、高、填充、笔划等等。

输出日志中保存了当前canvas中所包含的对象的基本信息

toObject

toObject仅以实际对象的形式返回与toJSON相同的表示形式，而没有字符串序列化。

	console.log(canvas.toObject());

toJSON输出本质上是一个字符串化的toObject输出

var rect3=new fabric.Rect()
rect3.toObject=function(){
	return {name:'trololo'}
}
canvas.add(rect3)
console.log(JSON.stringify(canvas));

objects数组目前就有了矩形的自定义表示

扩展objects里面的某些属性

var rect3=new fabric.Rect()
rect3.toObject=(function(toObject){
	return function(){
		return fabric.util.object.extend(toObject.call(this),{
			name:this.name
		})
	}
})(rect3.toObject)
canvas.add(rect3)
rect3.name='trololo'
console.log(JSON.stringify(canvas));

使用附加属性name扩展了对象先有的toObject方法，因此该属性是toObject输出的一部分，以JSON表示形式出现

toSVG

另一种有效的基于文本的画布表示形式为SVG形式。由于Fabric专注于在画布上进行SVG解析和渲染，因此只有将其设为双向过程并提供画布到SVG的转换才有意义

		<button onclick="toSVG()">toSVG</button>
function toSVG(){
	console.log(canvas.toSVG());
}

就像toJSON和toObject一样，toSVG（在画布上调用时）将其逻辑委托给每个单独的对象，并且每个单独的对象都有其自己的toSVG方法，该方法专用于对象类型。如果您需要修改或扩展对象的SVG表示形式，则可以使用toSVG来完成与toObject相同的操作。
与Fabric专有的toObject / toJSON相比，SVG表示的优点是您可以将其放入任何支持SVG的渲染器（浏览器，应用程序，打印机，照相机等）中，并且应该可以正常工作。但是，使用toObject / toJSON，您首先需要将其加载到画布上。
前面三种方法可以将画布序列化为搞笑的文本块，那么怎么将这些文本块，重新加载到画布上呢？？

反序列化，SVG解析器

与序列化类似，有两种字符串加载画布的方法：从JSON表示或者从SVG加载。
使用JSON表示形式时，有fabric.Canvas＃loadFromJSON和fabric.Canvas＃loadFromDatalessJSON方法。
使用SVG时，有fabric.loadSVGFromURL和fabric.loadSVGFromString
**注意：**前两个方法是实例方法，可以直接在canvas实例上调用，而后两个方法是静态方法，可以在“ fabric”对象上而不是在画布上调用

loadFromJSON

canvas.loadFromJSON('{"version":"4.3.1","objects":[{"type":"rect","version":"4.3.1","originX":"left","originY":"top","left":50,"top":50,"width":20,"height":20,"fill":"green","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"circle","version":"4.3.1","originX":"left","originY":"top","left":100,"top":100,"width":100,"height":100,"fill":"red","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":50,"startAngle":0,"endAngle":6.283185307179586}],"background":"#ddd"}')

loadFromDatalessJSON

在处理许多复杂形状时，toDatalessJSON允许我们进一步减少画布表示，并使用指向SVG的简单链接替换巨大的路径数据表示。
因此loadFromDatalessJSON只是允许从无数据版本的画布表示中加载画布。

canvas.toDatalessJSON()

fabric.loadSVGFromURL和fabric.loadSVGFromString

fabric.loadSVGFromString('...', function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
  canvas.add(obj).renderAll();
});

第一个参数是SVG字符串，第二个参数是回调函数。当解析和加载SVG并接收2个参数（objects和options）时，将调用该回调。 objects包含从SVG解析的对象数组-paths,path groups（用于复杂对象）,images,text等。为了将所有这些对象分组为一个内聚的集合，并使其与SVG文档中的外观相同，我们使用fabric.util.groupSVGElements传递对象和选项。作为回报，我们获得fabric.Path或fabric.Group的实例，然后可以将其添加到画布上。
fabric.loadSVGFromURL的工作方式相同，只不过您传递的是包含URL而不是SVG内容的字符串。请注意，Fabric将尝试通过XMLHttpRequest获取该URL，因此SVG需要符合通常的SOP规则。