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

How to set the border scale factor of a rectangle using FabricJS?

WBOY

Release： 2023-08-25 08:05:02

forward

1377 people have browsed it

How to set the border scale factor of a rectangle using FabricJS?

In this tutorial, we will set the border scale factor of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we need to create an instance of the fabric.Rect class and add it to the canvas.

We can use the borderScaleFactor property to specify the scale factor of the object's control border.

Syntax

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

Copy after login

Parameters

Options (optional) - This parameter is an object that provides the Extra customization. Using this parameter, you can change the color, cursor, stroke width and many other properties of the object related to the borderScaleFactor property.

Option Key

borderScaleFactor - This property accepts a number that specifies the border thickness. The default value is 1.

Example 1

Default behavior of borderScaleFactor property

Let us look at a code example that describes the default behavior of borderScaleFactor property Behavior. Although we have specified it in this example, the default value used by borderScaleFactor is still 1 when 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>Default behaviour of borderScaleFactor property</h2>
   <p>Select the rectangle to see the default value of <b>borderScaleFactor</b></p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         padding: 9,
         borderColor: "black",
         borderScaleFactor: 1,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copy after login

Example 2

Passing borderScaleFactor as key

Let’s look at a code example to increase the border of a rectangular object when its selection is activated thickness. In this example, we assign borderScaleFactor to a value of 5, which specifies the thickness of our 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>Passing borderScaleFactor as key</h2>
   <p>Select the rectangle to see the changed value of <b>borderScaleFactor</b></p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         padding: 9,
         borderColor: "black",
         borderScaleFactor: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to set the border scale factor of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!