How to disable selectability of rectangle using FabricJS?-JS Tutorial-php.cn

How to disable selectability of rectangle using FabricJS?

PHPz

Release： 2023-08-25 09:25:04

forward

1033 people have browsed it

How to disable selectability of rectangle using FabricJS?

In this article, we will learn how to disable selectivity of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we need to create an instance of the fabric.Rect class and add it to the canvas. In order to modify an object, we have to select it in FabricJS. However, we can change this behavior by using optional attributes.

Syntax

new fabric.Rect{ selectable: Boolean }: Object)

Copy after login

Parameters

Options (optional) - This parameter is an object , used to provide additional customization for the rectangle. Using this parameter, you can change the color, cursor, stroke width, and many other properties related to the selectable nature.

Option Key

Optional - This property accepts a Boolean value. When it is assigned "false", the object cannot be selected for modification. Its default value is true.

Example 1

Default behavior or when optional property is set to "True"

Let's look at one Code example to see how an object behaves when the optional property is set to True by default. When the Selective property is set to True, we can select an object, move it around the canvas and modify it.

<!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>Default behaviour; selectable property is set to True</h2>
   <p>You can try moving the rectangle around the canvas or scaling it to prove
that it&#39;s selectable.</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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copy after login

Example 2

Passing selectable attributes as keys

In this example, we set the value of the selectable attribute to False. This means we can no longer select the rectangular object for modification.

<!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>Passing selectable property as key</h2>
   <p>You can try clicking on the rectangle to see that it is no longer selectable.</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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
         selectable: false,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to disable selectability of rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!