Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 group only selected Polylines into a single object 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 grouping multiple Polyline objects, we can use the toGroup() method.
Syntax
toGroup(): Fabric.Group
Example 1: Creating an Instance of fabric.Polyline() and Adding it to our Canvas
Before seeing how we can group multiple objects into one, let's see a code example of how we can add a polyline object to our canvas. The only required parameter is the points Array whereas the second argument is the optional options 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> Creating an instance of fabric.Polyline() and adding it to our canvas </h2> <p>You can see that the polyline object has been added</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating a points array var points = [ { x: 30, y: 50 }, { x: 0, y: 0 }, { x: 60, y: 0 }, ]; // Initiating a polyline object var polyline = new fabric.Polyline(points, { left: 100, top: 40, fill: "white", strokeWidth: 4, stroke: "green", }); // Adding it to the canvas canvas.add(polyline); </script> </body> </html> Example 2: Grouping only selected Polylines using One Click
In this example, we will have a button on clicking which selected Polylines will be grouped into a single object. Thus moving that object will move all the grouped Polylines and it will behave as a single object as you resize or skew too.
We will create a function which gets all the selected 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 only selected Polyline objects using one click</h2> <p> Select the polylines by dragging on required area and click on the`Group` Button to group all the selected 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: 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); // Function to group the selected polyline objects into single object function group() { canvas.getActiveObject().toGroup(); } </script> </body> </html> 
301 Views
