FabricJS - How to disable multiple specific control points of a Line object?-JS Tutorial-php.cn

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

WBOY

Release： 2023-08-24 20:17:06

forward

1211 people have browsed it

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

Copy after login

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. < /p>
- '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.
  < /li>
- '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>

Copy after login

Disable the center-upper rotation control using the setControlsVisibility method

Example

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

<!DOCTYPE html> <html> <head>  <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>
Copy after login
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!