Home > Article > Web Front-end > How to set the scale factor (border) of a circle using FabricJS?

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

王林forward: 2023-08-24 15:45:18679browse

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

Parameters

Options (optional) - This parameter is a ObjectThis 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

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>

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>

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!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to disable a specific control point of an Image object using FabricJS?Next article：How to disable a specific control point of an Image object using FabricJS?

See more