search

Home >Web Front-end >JS Tutorial >How to disable selectability of rectangle using FabricJS?

How to disable selectability of rectangle using FabricJS?

PHPz
PHPzforward
2023-08-25 09:25:041035browse

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)

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>

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>

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!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to get the scaled width of text using FabricJSNext article：How to get the scaled width of text using FabricJS

Related articles

See more