![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to ungroup only selected grouped Polylines after grouping using FabricJS?
We can create a Polyline object by creating an instance of fabric.Polyline. A polyline object can be characterised by a set of connected straight-line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity, etc. For ungrouping grouped Polyline objects we can use the toActiveSelection() method.
Syntax
toActiveSelection(): fabric.ActiveSelection
Example 1: Grouping All the Polylines using One Click
Before seeing how to ungroup, let's see how we can group objects. In this example, we will have a button on clicking which all the Polylines will be grouped into a single object. Thus, moving that object will move all the Polylines and it will behave as a single object as you resize or skew too.
We will create a function which gets all the objects in the canvas and groups them into a single object.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Grouping all the Polyline objects using one click</h2> <p>Click on the `Group` Button to group all the Polyline objects in the canvas </p> <canvas id="canvas"></canvas> <button type="button" onclick="group()">Group</button> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a Polyline object var polyLine1 = new fabric.Polyline([ { x: 500, y: 200 }, { x: 550, y: 60 }, { x: 350, y: 100 }, ], { stroke: "green", fill: "white", strokeWidth: 5, }); // Initiate another Polyline object var polyLine2 = new fabric.Polyline([ { x: 300, y: 200 }, { x: 150, y: 60 }, { x: 250, y: 100 }, ], { stroke: "green", fill: "white", strokeWidth: 5, }); // Add them to the canvas instance canvas.add(polyLine1); canvas.add(polyLine2); // Function to group all the polyline objects into single object function group() { // Get all the objects as selection var sel = new fabric.ActiveSelection(canvas.getObjects(), { canvas: canvas, }); // Make the objects active canvas.setActiveObject(sel); // Group the objects canvas.getActiveObject().toGroup(); } </script> </body> </html>
Example 2: Ungrouping the selected grouped Polylines using One Click
In this example, we will have a button on clicking which selected grouped Polylines will be ungrouped. Thus the object will be behaving as separate objects. First, we will create two groups of Polylines where each group will have two Polyline objects.
Further, when a group is selected and ungroup button is pressed we will use the toActiveSelection() to ungroup the objects.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Ungrouping the selected grouped Polylines using one click</h2> <p>Click on the grouped object and click on `Ungroup` button to ungroup the objects, further click in empty space to discard the selection </p> <canvas id="canvas"></canvas> <button type="button" onclick="ungroup()">Ungroup</button> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate another Polyline object var polyLine1 = new fabric.Polyline([ { x: 300, y: 100 }, { x: 150, y: 60 }, { x: 250, y: 10 }, ], { stroke: "green", fill: "white", strokeWidth: 5, }); // Initiate another Polyline object var polyLine2 = new fabric.Polyline([ { x: 400, y: 200 }, { x: 250, y: 160 }, { x: 150, y: 200 }, ], { stroke: "blue", fill: "white", strokeWidth: 5, }); // Group two objects and add to canvas var group1 = new fabric.Group([polyLine1, polyLine2]); canvas.add(group1); // Initiate another Polyline object var polyLine4 = new fabric.Polyline([ { x: 400, y: 10 }, { x: 350, y: 60 }, { x: 450, y: 10 }, ], { stroke: "pink", fill: "white", strokeWidth: 5, }); // Initiate a Polyline object var polyLine3 = new fabric.Polyline([ { x: 500, y: 200 }, { x: 550, y: 60 }, { x: 350, y: 100 }, ], { stroke: "red", fill: "white", strokeWidth: 5, }); // Group two objects and add to canvas var group2 = new fabric.Group([polyLine3, polyLine4]); canvas.add(group2); // Function to ungroup the selected grouped polyline objects function ungroup() { canvas.getActiveObject().toActiveSelection(); } </script> </body> </html>