search

Home >Web Front-end >JS Tutorial >How to set a circle's border opacity when moving using FabricJS?

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

王林
王林forward
2023-08-24 14:53:02835browse

如何使用 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)

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 borderOpacityWhenMoving is an attribute.

    • ul>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>
      <!-- Adding the Fabric JS Library-->
      <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>

    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>
      <!-- Adding the Fabric JS Library-->
      <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>

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!

对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to set the fill color of an ellipse using FabricJS?Next article：How to set the fill color of an ellipse using FabricJS?

Related articles

See more