Home > Web Front-end > JS Tutorial > How to disable multiple specific control points of an image object using FabricJS?

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

王林
Release: 2023-08-22 12:45:07
forward
1468 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

1

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

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

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template