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

How to set the padding of a rectangle using FabricJS?

PHPzforward: 2023-09-02 16:49:131256browse

如何使用 FabricJS 设置矩形的填充？

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

Just like we can specify the position, color, opacity and size of the rectangular object in the canvas, we can also set the fill of the rectangular object. This can be done using the padding attribute.

Syntax

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

Parameters

Options (optional) - This parameter is an object which is our rectangle Provides additional customization. Using this parameter, you can change properties related to the object for which padding is an attribute, such as color, cursor, stroke width, and many other properties.

Option Key

Fill - This property accepts numeric values. The specified value determines the distance between the rectangular object and its controlling bounding box.

Example 1

Default appearanceDoes not use padding

Let’s look at a code example, It shows the appearance of a rectangular object when the padding property is not used. As we can see, there is no space between the object and its surrounding control boundaries. This means there is zero padding between the rectangle and its controlling 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>Default appearance when padding is not used</h2>
   <p>You can select the rectangle to see there is no space between the object and its controlling borders.</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
      });

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

Example

Passing padding property as key

In this example, we are passing padding property as key with value 7. this Indicates that the distance between the rectangular object and all its objects is 7px Control boundaries.

<!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 padding property as key</h2>
   <p>You can select the rectangle to see the padding between the object and its controlling borders.</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         stroke: "#191970",
         strokeWidth: 5,
         padding: 7,
      });

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

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

对象 padding fabric

Statement：

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

Previous article：How to concatenate two strings in JavaScript so that the second string must be concatenated at the end of the first string?Next article：How to concatenate two strings in JavaScript so that the second string must be concatenated at the end of the first string?

See more