How to set a circle's border opacity when moving using FabricJS?-JS Tutorial-php.cn

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

王林

Release： 2023-08-24 14:53:02

forward

806 people have browsed it

如何使用 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 the borderOpacityWhenMoving property to change the opacity of the circle as it moves around the canvas.

Syntax

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

Copy after login

Parameters

##Options (optional) - this parameter is an object that 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>borderOpacityWhenMoving is an attribute.

Option Key
borderOpacityWhenMoving - This property accepts numbers , 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
boderOpacityWhenMoving Default 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.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Setting the border opacity of Circle while moving using FabricJS</h2> <p>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 <b>boderOpacityWhenMoving</b> property.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var cir = new fabric.Circle({ left: 215, top: 100, fill: "", radius: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#966fd6", }); // Adding it to the canvas canvas.add(cir); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copy after login
Example 2
Passing borderOpacityWhenMoving as a key
Let’s look at an example of assigning a value to the
borderOpacityWhenMoving property. 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.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to set the border opacity of Circle while moving using FabricJS?</h2> <p>Select the object and move it around. You will notice that the border opacity becomes 0 when moving the object. Here we have set <b>borderOpacityWhenMoving</b> to 0.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var cir = new fabric.Circle({ left: 215, top: 100, fill: "", radius: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#966fd6", borderOpacityWhenMoving: 0, }); // Adding it to the canvas canvas.add(cir); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
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!