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

In this tutorial, we will learn how to disable multiple specific control points of a Line object using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, 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. To disable multiple specific control points of a Line object, we use thesetControlsVisibilitymethod.

Syntax

setControlsVisibility(options: Object): fabric.Object

Parameters

• Options- This parameter accepts an object value that Setup controls. Possible values are -

  • 'tl'- This property accepts aBooleanvalue that enables or disables the upper left control.

  • 'tr'- This property accepts aBooleanvalue that enables or disables the upper-right control.

  • 'br'- This property accepts abooleanvalue that enables or disables the bottom control right control.

  • 'bl'- This property accepts aBooleanvalue that enables or disables the lower left control.

  • 'ml'- This property accepts aBooleanvalue that enables or disables the center-left control. < /p>

  • 'mt'- This property accepts abooleanvalue that enables or disables the center-top control.

  • 'mr'- This property accepts abooleanvalue that enables or disables the center-right control.

    < /li>

  • 'mb'- This property accepts abooleanvalue that enables or disables the center-lower control.

  • 'mtr'- This property accepts abooleanvalue that enables or disables the mid-top rotation control.

UsingsetControlsVisibilityMethod

Example

Let’s look at a code example to see the output when When using thesetControlsVisibilitymethod.setControlsVisibilityMethod sets the visibility of multiple specified controls. In this case, since we passed a false value to the "tl" and "bl" controls, the top left and bottom left controls will be disabled.

     
  
Using setControlsVisibility method
 
 You can select the line object to see that the bottom-left and top-left controls have been disabled 
    

Disable the center-upper rotation control using thesetControlsVisibilitymethod

Example

In this example, we will usesetControlsVisibility< /i> to disable the "mtr" control method, this control is also called the upper-center rotation control.

     
  
Using setControlsVisibility method
 
 You can select the line object to see that the middle-top-rotate control has been disabled