Identify Type of Line Instance Using Fabric.js

In this tutorial, we are going to learn about how to identify the type of a Line instance using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically onedimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to identify the type of a Line instance, we use the isType method.

Syntax

isType(type: String): Boolean

Parameters

  • type ? This parameter accepts a String which specifies the type we want to check.

Using isType method

Example

Let's see a code example to see the logged output when the isType method is used. The isType method returns a true or false value depending on whether the type of the instance matches against the type that we want to check or not. In this case, a true value is returned since the type matches.


<!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>Using isType method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a true value
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using isType method
      console.log(
         "Is the specified type identical to a line instance? : ",
         line.isType("line")
      );
   </script>
</body>
</html>

Using isType method with a different value

Example

In this example, we have used the isType to check if the specified circle type is identical to a line instance. Here, a false value is returned since they are not identical.


<!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>Using isType method with a different value</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a false value
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using isType method
      console.log(
         "Is the specified type identical to a line instance? : ",
         line.isType("circle")
      );
   </script>
</body>
</html>
Updated on: 2022-10-21T07:53:45+05:30

140 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements