search

Home >Web Front-end >JS Tutorial >How to add a stroke to a rectangle using FabricJS?

How to add a stroke to a rectangle using FabricJS?

王林
王林forward
2023-09-06 12:01:07988browse

如何使用 FabricJS 向矩形添加描边？

In this tutorial, we will learn how to add a stroke to 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.

Our rectangular object can be customized in many ways, such as changing its dimensions, adding a background color, or changing the color of the lines drawn around the object. We can do this by using the Stroke attribute.

Syntax

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

Parameters

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

Option Key

  • Stroke - This property accepts a String and identifies the object The color of the border.

Example 1

Pass the stroke as a key with a hex value

Let Let's look at a code example to see how a rectangular object displays when using the

lines property. Hexadecimal color codes begin with "#" followed by a six-digit number representing the color. In this case, we used "#000080", which is navy blue. 

<!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 stroke as key with a hexadecimal value</h2>
   <p>You can see the navy blue border around the rectangle</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: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#000080",
         strokeWidth: 9,
      });

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

Example 2

Pass rgba value to lines attribute

In this example we will see how to The stroke attribute is assigned an "rgba" value. Instead of hexadecimal color codes we can use

RGBA values ​​which stand for: red, green, blue and alpha. The alpha parameter specifies the opacity of the color. In this example we used the rgba value (0,0,128,0.8) which is navy blue with an opacity of 0.8. 

<!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 stroke property</h2>
   <p>You can see the colour added using rgba to the rectangle&#39;s stroke</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: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "rgba(0,0,128,0.8)",
         strokeWidth: 9,
      });

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

The above is the detailed content of How to add a stroke to 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 create a textbox with background color using FabricJS?Next article：How to create a textbox with background color using FabricJS?

Related articles

See more