FabricJs使用 -- Group

Group

组的概念，就是可以同时操作多个对象，方便一起处理。

举例

var circle = new fabric.Circle({
            radius: 100,
            fill: '#eef',
            scaleY: 0.5,
            originX: 'center',
            originY: 'center'
            });

var text = new fabric.Text('hello world', {
	fontSize: 30,
	originX: 'center',
	originY: 'center'
	});

var group = new fabric.Group([ circle, text ], {
	left: 150,
	top: 100,
	angle: -10
	});

canvas.add(group);

对其中的对象集修改

group.item(0).set('fill', 'red');
                group.item(1).set({
                text: 'trololo',
                fill: 'white'
            });

元素相对于group定位

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: 'blue',
    left: 200
});

var group = new fabric.Group([ circle1, circle2, circle3 ], {
    left: 200,
    top: 100
});

canvas.add(group);

序列化

var canvas = new fabric.Canvas('c');
JSON.stringify(canvas);

SVG

canvas.add(new fabric.Rect({
 left: 50,
 top: 50,
 height: 20,
 width: 20,
 fill: 'green'
}));
console.log(canvas.toSVG());

参考

1. 官网地址

联系我

关注微信号:大前端说，获取文章中提到的代码案例。库使用过程有什么问题，可以跟我沟通，加我的wx:meetbc。欢迎交流关于前端的任何话题。