When we hear the word "group," we often think of various associations, from social circles to musical bands or even a gathering of animals. A Fabric.js group is a collection of objects that are clustered together. These groups serve multiple purposes, such as moving and modifying objects collectively or applying property changes uniformly across multiple objects. In this blog post, we will explore how to create object groups using Fabric.js, empowering you to streamline your object manipulation and modification tasks. Why Use Object Groups in Fabric.js: Object groups offer several advantages and functionalities, including: With object groups, you can conveniently move multiple objects as a single unit, simplifying the positioning and arrangement of complex scenes. Moving Multiple Objects Together: By grouping objects, you can apply modifications uniformly across the entire group, saving time and effort when making changes to related objects. Modifying Objects as a Group: Object groups enable simultaneous property changes, allowing you to apply transformations like skewing, scaling, fill color, stroke, and more to multiple objects at once. Applying Property Changes: Creating Object Groups in Fabric.js: To create an object group in Fabric.js, we utilize the fabric.Group constructor. Let's take a closer look at its syntax and usage: Syntax: new fabric.Group(objects: Object, 
                  options(optional): Object, 
                  isAlreadyGrouped(optional): Boolean); The parameter accepts an array of objects that we want to group together. objects Optional can be passed as an object, allowing customization of group properties like position and angle. options The parameter is used to indicate if the provided objects are already grouped. isAlreadyGrouped Creating a Basic Object Group: Follow these steps to create a basic object group: You can group shapes, images, or text elements by creating individual objects. Pass these objects as an array to the constructor. fabric.Group 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); A circle, an image, and a text element are combined in the above example. The variable represents the newly created object group, which is then added to the canvas. group Customizing Object Groups: You can further customize object groups by providing optional properties to the object parameter. These properties allow you to define the group's position, rotation angle, and other visual attributes. options Example: var group = new fabric.Group([circle, image, text], {
  left: 70,
  top: 94,
  angle: -10,
}); In the above example, we set the and properties to position the group on the canvas. Additionally, we specify an to rotate the entire group. left top angle Creating a Group of Two Objects: Creating a group of two objects follows a similar approach. However, we need to ensure proper alignment within the group by setting the and properties to "center" for each object. originX originY 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); In the above example, we create a group of a rectangle and text element. By specifying the and properties as "center" for each object, we ensure they are properly centered within the group. originX originY 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. Let's explore how to ungroup objects using Fabric.js with an example. Example of Ungrouping Objects: You want to ungroup a group of objects and treat them separately. Consider a group consisting of two rectangles and a text element. We will demonstrate how to ungroup them using Fabric.js. var canvas = new fabric.Canvas("canvas");

// Create the rectangles
var rect1 = new fabric.Rect({
  width: 100,
  height: 50,
  fill: "blue",
  left: 50,
  top: 50,
});

var rect2 = new fabric.Rect({
  width: 100,
  height: 50,
  fill: "red",
  left: 200,
  top: 50,
});

// Create the text element
var text = new fabric.Text("Hello", {
  fontSize: 20,
  fill: "white",
  left: 120,
  top: 60,
});

// Group the objects
var group = new fabric.Group([rect1, rect2, text], {
  left: 100,
  top: 100,
});

canvas.add(group);

// Ungroup the objects
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();
});

canvas.renderAll(); In the code above, we assume that canvas is the Fabric.js canvas object. First, we retrieve the active object from the canvas using . We then convert the active object into a group using the method, and store it in the activegroup variable. getActiveObject() toGroup() A list of objects within the group is obtained using the method and stored in the variable. getObjects() objectsInGroup A clone of the activegroup is then created using the clone() method. Inside the callback function of clone(), we remove the activegroup from the canvas using . remove(activegroup) We iterate over the objectsInGroup array and remove each individual object from the canvas using . remove(object) After removing the group and its objects, we add the cloned group back to the canvas using . add(newgroup) Finally, we set the newgroup as the active object on the canvas using , and request the canvas to render the changes using By executing this code, you will ungroup the objects and have them restored as separate entities on the canvas. setActiveObject(newgroup) 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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch before making any investment decisions or decisions regarding you health or security. (Do not regard any of this content as professional investment advice, or health advice)

Simplifying Object Manipulation: Grouping and Ungrouping Fabric.js Objects

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

13 Product Discovery Phases: A Step-by-Step Checklist for Success

How to Customize Rotate Icons in Fabric.js: A Comprehensive Guide for Programmers

A Comprehensive Guide to Working with Objects and Shapes in Fabric.js

Getting Started with Fabric.js in Angular 13: Creating and Editing Canvas

How to Build Custom Textboxes in Fabric.js: Stroked, Rounded, and Padded

Mastering Object Snapping in Fabric.js: Introducing the SnappyRect Class

13 Product Discovery Phases: A Step-by-Step Checklist for Success

How to Customize Rotate Icons in Fabric.js: A Comprehensive Guide for Programmers

A Comprehensive Guide to Working with Objects and Shapes in Fabric.js

Getting Started with Fabric.js in Angular 13: Creating and Editing Canvas

How to Build Custom Textboxes in Fabric.js: Stroked, Rounded, and Padded

Mastering Object Snapping in Fabric.js: Introducing the SnappyRect Class

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps