FabricJS – How to check if a specified control is visible in Line?

In this article, we are going to learn about how to check if a specified control is visible in Line 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 check if a specified control is visible in Line object, we use the isControlVisible method.

Syntax

 isControlVisible(controlKey: String): Boolean

Parameters

controlKey − This parameter accepts a String which specifies the control key. The possible values are ‘tl’, ‘tr’, ‘br’ , ‘bl’, ‘ml’, ‘mt’, ‘mr’, ‘mb’, ‘mtr’. They are listed below:
- ‘tl’ − This property accepts a Boolean value which enables or disables the top-left control.
- ‘tr’ − This property accepts a Boolean value which enables or disables the top-right control.
- ‘br’ − This property accepts a Boolean value which enables or disables the bottom-right control.
- ‘bl’ − This property accepts a Boolean value which enables or disables the bottom-left control.
- ‘ml’ − This property accepts a Boolean value which enables or disables the middle-left control.
- ‘mt’ − This property accepts a Boolean value which enables or disables the middle-top control.
- ‘mr’ − This property accepts a Boolean value which enables or disables the middle-right control.
- ‘mb’ − This property accepts a Boolean value which enables or disables the middle-bottom control.
- ‘mtr’ − This property accepts a Boolean value which enables or disables the middle-top-rotate control.

Using isControlVisible method

Example

Let’s see a code example to see the logged output when the isControlVisible method is used. The isControlVisible method returns a true or false value depending on whether the control key is visible or not. In this case, a true value is returned since the bottomleft control key is visible.


<!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 isControlVisible 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 isControlVisible method
      console.log(
         "Is the bottom-left control key visible? : ",
         line.isControlVisible('bl')
      );
   </script>
</body>
</html>

Using isControlVisible method for an invisible control

Example

In this example, we have used the isControlVisible to check if the middle-top-rotate control is visible or not. Here, a false value is returned since the middle-top-rotate control key is invisible.


<!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 isControlVisible method for an invisible control</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);
      
      // Make “mtr” control invisible
      line.setControlVisible("mtr", false);
      
      // Using isControlVisible method
      console.log(
         "Is the middle-top-rotate control key visible? : ",
         line.isControlVisible("mtr")
      );
   </script>
</body>
</html>