Group

The concept of a group is that you can operate on multiple objects at the same time.

For example,

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);Copy the code

Modify the set of objects in it

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

The element is positioned relative to the 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);
Copy the code

serialization


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


Copy the code

SVG

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


Copy the code

reference

  1. The website address

To contact me

Pay attention to wechat: big front-end said, to obtain the code case mentioned in the article. If you have any problem with the library, please contact me and add my WX: MeetBC. Any topic about the front end is welcome.