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 multiple 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 multiple 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 All the grouped Polylines using One Click
In this example, we will have a button on clicking which grouped Polylines will be ungrouped. Thus the object will be behaving as separate objects. First, we will group all the objects into a single object. Further, when 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 all the 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 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: 100 },
{ x: 150, y: 60 },
{ x: 250, y: 10 },
], {
stroke: "green",
fill: "white",
strokeWidth: 5,
});
// Initiate another Polyline object
var polyLine3 = new fabric.Polyline([
{ x: 400, y: 200 },
{ x: 250, y: 160 },
{ x: 150, y: 200 },
], {
stroke: "green",
fill: "white",
strokeWidth: 5,
});
// Add them to the canvas instance
canvas.add(polyLine1);
canvas.add(polyLine2);
canvas.add(polyLine3);
// 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();
// Function to ungroup the grouped polyline objects
function ungroup() {
canvas.getActiveObject().toActiveSelection();
}
</script>
</body>
</html>
256 Views
