Home > Article > Web Front-end > How to disable selectivity of Triangle using FabricJS?

How to disable selectivity of Triangle using FabricJS?

王林forward: 2023-09-08 17:13:021152browse

如何使用 FabricJS 禁用 Triangle 的选择性？

In this tutorial, we will learn how to disable selectivity of triangles using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the Fabric.Triangle class and add it to the canvas.

In order to modify an object, we must select it in FabricJS. However, we can disable this behavior by using the selectable attribute.

Syntax

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

Parameters

Options (optional) - This parameter is a Object Provides additional customization to our triangle. Using this parameter, you can change the properties of the object related to the selectable property, such as color, cursor, stroke width and many other properties.

Option Key

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

Example 1

Default behavior or optional property when set to "true"

Let's look at a code example to see how the object behaves by default when the selectable property is set to True. When the selectable 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 or when selectable property is set to &#39;true&#39;</h2>
   <p>You can try moving the triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
      });

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

Example 2

Passing optional properties as keys

In this example, we assign a False value to the optional properties. This means we can no longer select the triangle 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 see that the triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
         selectable: false,
      });

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

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

对象 ul fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to do a word count on a text area using JavaScript?Next article：How to do a word count on a text area using JavaScript?

See more