search

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

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

WBOY
WBOYforward
2023-08-25 08:05:021378browse

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)

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>

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>

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!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to dynamically insert an id into a table element using JavaScript?Next article：How to dynamically insert an id into a table element using JavaScript?

Related articles

See more