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

How to disable selectivity of Circle using FabricJS?

WBOYforward: 2023-09-01 19:41:02860browse

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

In this tutorial, we will learn how to disable circle selectivity using FabricJS. Circles are one of the various shapes provided by FabricJS. In order to create a circle, we must create an instance of the Fabric.Circle 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 the selectable attribute.

Syntax

new fabric.Circle({ selectable: Boolean }: Object)

Parameters

Options (optional) - This parameter is a Object Provides additional customization for our circles. 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 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 attribute Set to "true"

Let Let's look at an example to see how an object behaves when the selectable property is set to True by default. 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>Disabling the selectability of circle using FabricJs</h2>
      <p>Here you can select the object (circle) and move it around freely. This is the default behavior. Here we have not used the <b>selectable</b> property but by default, it is set to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Pass selectable property as key

In this example, we are selectable property. This means we can no longer select circular objects 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>Disabling the selectability of circle using FabricJs</h2>
      <p>Now you can no longer select the circle because we have set <b>selectable</b> as False. </p>
      <canvas id="canvas"></canvas>
   
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65",
            selectable: false
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

对象 fabric

Statement：

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

Previous article：How to concatenate regular expression literals in JavaScript?Next article：How to concatenate regular expression literals in JavaScript?

See more