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 thefabric.Rectclass 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 anobject, 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 aBoolean 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 theSelectiveproperty is set to True, we can select an object, move it around the canvas and modify it.

     
  
Default behaviour; selectable property is set to True
 
You can try moving the rectangle around the canvas or scaling it to prove that it's selectable.
    

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.

     
  
Passing selectable property as key
 
You can try clicking on the rectangle to see that it is no longer selectable.
    

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!