FabricJS – How to disable multiple specific control points of a Line object?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to disable multiple specific control points of Line object 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 one-dimensional 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 disable multiple specific control points of Line object, we use the setControlsVisibility method.

Syntax

 setControlsVisibility(options: Object): fabric.Object

Parameters

options − This parameter accepts an Object value which sets the visibility state of controls. The possible values are −
- ‘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 setControlsVisibility method

Example

Let’s see a code example to see the output when the setControlsVisibility method is used. The setControlsVisibility method sets the visibility of multiple specified controls. In this case, since we have passed the ‘tl’ and ‘bl’ controls a false value, thus the top-left and bottom-left controls will be disabled.


<!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 setControlsVisibility method</h2>
   <p>
      You can select the line object to see that the bottom-left and top-left controls have been disabled
   </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: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using setControlsVisibility method
      line.setControlsVisibility({
         tl: false,
         bl: false,
      });
   </script>
</body>
</html>

Using setControlsVisibility method to disable the middle-top-rotate control

Example

In this example, we will use the setControlsVisibility method to disable the ‘mtr’ control, which is also known as the middle-top-rotate control.


<!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 setControlsVisibility method</h2>
   <p>
      You can select the line object to see that the middle-top-rotate control has been disabled
   </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: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using setControlsVisibility method
      line.setControlsVisibility({
         'mtr': false,
      });
   </script>
</body>
</html>

Rahul Gurung

Updated on: 21-Oct-2022

402 Views

Kickstart Your Career

Get certified by completing the course

Get Started