search

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?

PHPz
PHPzforward
2023-09-09 20:53:081321browse

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

    • ul>Option Key

    • 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).

    Example 1

    Passing borderColour key using string value

    Let’s look at a code example to understand how to set borderColor key Property assignment. We have assigned the value "blue" to the

    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>

    Example 2

    Pass an RGBA value to the borderColor key

    instead of a simple color name as a string Pass, we can also use an RGBA value whose components specify the amount of red, green, blue, and alpha, where alpha represents opacity. In this example we used

    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?

Related articles

See more