Simplify Object Manipulation: Grouping and Ungrouping with Fabric.js

When we think of the term "group," various associations come to mind, such as social circles, musical bands, or even gatherings of animals. In the context of Fabric.js, a group refers to a collection of objects clustered together, offering numerous advantages for manipulating and modifying objects.

Why Use Object Groups in Fabric.js

Object groups in Fabric.js provide several benefits and functionalities:

1. Moving Multiple Objects Together:

Easily move multiple objects as a single unit, simplifying the positioning and arrangement of complex scenes.

2. Modifying Objects as a Group:

Save time and effort by applying modifications uniformly across an entire group of objects, making changes to related objects a breeze.

3. Applying Property Changes:

Quickly apply transformations like skewing, scaling, fill color, stroke, and more to multiple objects simultaneously.

Creating Object Groups in Fabric.js

To create an object group in Fabric.js, you can use the fabric.Group constructor. Let's explore its syntax and usage:

Syntax:

new fabric.Group(objects: Object, 
									options(optional): Object, 
									isAlreadyGrouped(optional): Boolean);

The objects parameter accepts an array of objects that you want to group together. Optional options can be passed as an object to customize group properties like position and angle.

The isAlreadyGrouped parameter is used to indicate if the provided objects are already grouped.

Creating a Basic Object Group:

To create a basic object group, follow these steps:

1. Create individual objects, such as shapes, images, or text elements.
2. Pass these objects as an array to the fabric.Group constructor.

Example:

var circle = new fabric.Circle({ radius: 30, fill: "#FF0000" });
var image = new fabric.Image(...);
var text = new fabric.Text("Hello", ...);

var group = new fabric.Group([circle, image, text]);
canvas.add(group);

Customizing Object Groups:

You can further customize object groups by providing optional properties to the options object parameter. These properties allow you to define the group's position, rotation angle, and other visual attributes.

Example:

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

Creating a Group of Two Objects:

Creating a group of two objects follows a similar approach. However, ensure proper alignment within the group by setting the originX and originY properties to "center" for each object.

Example:

var rect = new fabric.Rect({
    width: 100,
    height: 85,
    fill: "#FFC0CB",
    originX: "center",
    originY: "center"
});
var text = new fabric.Text("Hello world@", {
    fontSize: 30,
    originX: "center",
    originY: "center"
});
var group = new fabric.Group([rect, text], {
    left: 150,
    top: 100,
    angle: -10
});
canvas.add(group);

Ungrouping Fabric.js Objects

In addition to creating groups of objects in Fabric.js, you also have the ability to ungroup them when needed. Ungrouping objects allows you to restore their individual properties and manipulate them independently.

Example of Ungrouping Objects:

To ungroup a group of objects and treat them separately, consider a group consisting of two rectangles and a text element.

You can ungroup them using the following Fabric.js code:

var activeObj = canvas.getActiveObject();
var activegroup = activeObj.toGroup();
var objectsInGroup = activegroup.getObjects();

activegroup.clone(function(newgroup) {
    canvas.remove(activegroup);
    objectsInGroup.forEach(function(object) {
        canvas.remove(object);

    });
    canvas.add(newgroup);
    canvas.setActiveObject(newgroup);
    canvas.requestRenderAll();
});

Conclusion

Mastering object grouping in Fabric.js empowers you to simplify object manipulation and modification tasks. By creating object groups, you can move, modify, and apply property changes to multiple objects simultaneously, enhancing your productivity and efficiency.

Whether you're working with complex scenes or need to apply uniform transformations, object groups in Fabric.js are a valuable tool in your development arsenal. Start leveraging the power of object grouping in Fabric.js and take your canvas-based applications to the next level.