How to disable multiple specific control points of an image object using FabricJS?-JS Tutorial-php.cn

How to disable multiple specific control points of an image object using FabricJS?

王林

Release： 2023-08-22 12:45:07

forward

1419 people have browsed it

How to disable multiple specific control points of an image object using FabricJS?

In this tutorial we will learn how to disable multiple specific control points.

Create image objects using FabricJS. We can create an image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily Customize it by applying properties such as angle, opacity, etc. In order to disable multiple For the image object of a specific control point, we use the setControlsVisibility method

grammar

setControlsVisibility(options: Object): fabric.Object

Copy after login

parameter

options − This parameter accepts an Object value, used to set the visible state controls. Possible values are −
- ‘tl’ − This property accepts a boolean value that enables or disables the upper left corner control
- ‘tr’ −This property accepts a boolean value for enabling or disabling the upper right corner control
- ‘br’ −This property accepts a boolean value used to enable or disable the lower right corner control 'bl' - This property accepts a boolean value to enable or disable the bottom left corner control 'ml' − This property accepts a boolean value that enables or disables the center left control
- ‘mt’ −This property accepts a boolean value used to enable or disable the mid-upper control
- ‘mr’ −This property accepts a Boolean value used to enable or disable the center-right control ‘mb’ − This attribute accepts a boolean value to enable or disable the mid-lower control
- ‘mtr’ −This property accepts a Boolean value that is used to enable or disable the center-top rotation control

Use setControlsVisibility method

Example

Let's look at a code example to see the output when the setControlsVisibility method is called use. setControlsVisibility Method sets the visibility of multiple specified controls. exist In this case, since we set the "tl" and "bl" controls to false values, the upper left And the controls on the bottom left 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 image object to see that the bottom-left and top-left controls have been disabled
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="How to disable multiple specific control points of an image object using FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using setControlsVisibility method
      image.setControlsVisibility({
         tl: false,
         bl: false,
      });
   </script>
</body>
</html>

Copy after login

Use the setControlsVisibility method to disable middle top rotation

The translation of control is: control

Example

In this example, we will use the setControlsVisibility method to disable the "mtr" control This is also known as mid-upper 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 to disable the middle-top-rotate control
   </h2>
   <p>
      You can select the image object to see that the middle-top-rotate control has been disabled
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="How to disable multiple specific control points of an image object using FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using setControlsVisibility method
      image.setControlsVisibility({
         mtr: false,
      });
   </script>
</body>
</html>

Copy after login

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