How to set the scale factor (border) of a circle using FabricJS?-JS Tutorial-php.cn

How to set the scale factor (border) of a circle using FabricJS?

王林

Release： 2023-08-24 15:45:18

forward

761 people have browsed it

如何使用 FabricJS 设置圆的比例因子（边框）？

In this tutorial, we will set the scale factor (border) of a Circle 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. We can use the borderScaleFactor property to specify the scale factor of the object that controls the border.

Syntax

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

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em>This 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 borderScaleFactor is a property.

Option key

borderScaleFactor − This property Accepts numbers that specify the border thickness. The default value is 1.

Example 1

borderScaleFactorDefault behavior of the property< /p>

Let us see a description of the borderScaleFactor property Example of default behavior. Although we specified it in this example, by default borderScaleFactor will use 1 even if not specified.

<!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 scale factor (border) of circle using FabricJS</h2>
      <p>Select the object and notice its border. Here we have set <b>borderScaleFactor</b> at 1, which is the default value. </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: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
            borderScaleFactor: 1
         });

         // 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 borderScaleFactor as key

Let’s look at the code that increases the border thickness of a circular object when its border is actively selected. In this example, we assigned a value of 5 to borderScaleFactor, which specifies the thickness of the border.

<!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 scale factor (border) of a circle using FabricJS</h2>
      <p>Select the object and notice the thickness of its border. Here we have set the <b>borderScaleFactor</b> at 5. </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: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
            borderScaleFactor: 5
         });

         // 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 the scale factor (border) of a circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!