How to set a circle's border opacity when moving using FabricJS?

In this tutorial, we will use FabricJS to set the border opacity of a Circle when moving. 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. We can use theborderOpacityWhenMovingproperty to change the opacity of the circle as it moves around the canvas.

Syntax

new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)

Parameters

• ##Options (optional)- this parameter is anobjectthat provides additional customization for our circles. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties associated with the object for which < /em>borderOpacityWhenMovingis an attribute.

Option Key

• borderOpacityWhenMoving- This property acceptsnumbers, specifies how opaque we want the border to be when moving the circle. It allows us to control the opacity of the border when moving the circular object. The default value is 0.4.

Example 1

Showing the default behavior of the borderOpacityWhenMoving property

Let's look at an example showing

boderOpacityWhenMovingDefault behavior of properties. As we select the circle object and move it around the canvas, the opacity of the selection border changes from 1 (fully opaque) to 0.4, which makes it look a bit translucent.

     
  
Setting the border opacity of Circle while moving using FabricJS
 
Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the boderOpacityWhenMoving property.
    

Copy after login
Example 2

Passing borderOpacityWhenMoving as a key

Let’s look at an example of assigning a value to the

borderOpacityWhenMovingproperty. In this example, we specify the value as 0. This tells us that when we move the circle, the border opacity will change to 0 and become invisible.

     
  
How to set the border opacity of Circle while moving using FabricJS?
 
Select the object and move it around. You will notice that the border opacity becomes 0 when moving the object. Here we have set borderOpacityWhenMoving to 0.
    

Copy after login

The above is the detailed content of How to set a circle's border opacity when moving using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!