How to create a rectangle with border color using FabricJS?-JS Tutorial-php.cn

How to create a rectangle with border color using FabricJS?

PHPz

Release： 2023-09-09 20:53:08

forward

1329 people have browsed it

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

Copy after login

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>

Copy after login

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>

Copy after login

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!