Ungroup Multiple Polylines Using Fabric.js

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>
Updated on: 2023-02-16T16:31:45+05:30

407 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements