Home > Article > Web Front-end > FabricJS - How to disable multiple specific control points of a Line object?

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

WBOYforward: 2023-08-24 20:17:061128browse

FabricJS – 如何禁用 Line 对象的多个特定控制点？

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 the setControlsVisibility method.

Syntax

 setControlsVisibility(options: Object): fabric.Object

Parameters

Options - This parameter accepts an object value that Setup controls. Possible values are -
- 'tl' - This property accepts a Boolean value that enables or disables the upper left control.
- 'tr' - This property accepts a Boolean value that enables or disables the upper-right control.
- 'br' - This property accepts a boolean value that enables or disables the bottom control right control.
- 'bl' - This property accepts a Boolean value that enables or disables the lower left control.
- 'ml' - This property accepts a Boolean value that enables or disables the center-left control.
- 'mt' - This property accepts a boolean value that enables or disables the center-top control.
- 'mr' - This property accepts a boolean value that enables or disables the center-right control.
- 'mb' - This property accepts a boolean value that enables or disables the center-lower control.
- 'mtr' - This property accepts a boolean value that enables or disables the mid-top rotation control.

Using setControlsVisibilityMethod

Example

Let’s look at a code example to see the output when When using the setControlsVisibility method. setControlsVisibility Method 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.

<!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>

Disable the center-upper rotation control using the setControlsVisibility method

Example

In this example, we will use setControlsVisibility to disable the "mtr" control method, this control is also called the upper-center rotation 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>

The above is the detailed content of FabricJS - How to disable multiple specific control points of a Line object?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to disable IText selectivity using FabricJS?Next article：How to disable IText selectivity using FabricJS?

See more

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

Syntax

Parameters

Using setControlsVisibilityMethod

Example

Disable the center-upper rotation control using the setControlsVisibility method

Example

Related articles