Home > Article > Web Front-end > How to create a rectangle with border color using FabricJS?

How to create a rectangle with border color using FabricJS?

PHPzforward: 2023-09-09 20:53:081259browse

如何使用 FabricJS 创建带有边框颜色的矩形？

In this tutorial, we will create a rectangle with a border color 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.

Since FabricJS is so flexible, we can customize our rectangle object in any way we like. One of the properties provided by FabricJS is borderColor, which allows us to manipulate the color of the border when the object is active.

Syntax

new fabric.Rect({ borderColor: String }: Object)

Parameters

Options (optional) - This parameter is a ## that provides additional customization #Object to our rectangle. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties associated with the object for which borderColor is a property.

borderColor - This property accepts a string that specifies the color of the selection rectangle The border of the object. Its default value is rgb(178,204,255).

Passing borderColour key using string value

borderColor key, which helps in creating a blue border when selecting a rectangular object.

<!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 borderColour key with a String value</h2>
   <p>Select the rectangle to see the border colour</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",
         borderColor: "blue",
         padding: 9,
      });

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

Pass an RGBA value to the borderColor key

rgb(128,0,128) which is the purple rgb value.

<!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 an RGBA value to the borderColor key</h2>
   <p>Select the rectangle to see the border colour</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",
         borderColor: "rgb(128,0,128)",
         padding: 9,
      });

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

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

字符串值传递对象 fabric

Statement：

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

Previous article：How to flip a rectangle vertically using FabricJS?Next article：How to flip a rectangle vertically using FabricJS?

See more

How to create a rectangle with border color using FabricJS?

Syntax

Parameters

Related articles