组合
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规则。