Home > Article > Web Front-end > How to add a stroke to a triangle using FabricJS?

How to add a stroke to a triangle using FabricJS?

WBOYforward: 2023-09-21 13:49:02739browse

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

In this tutorial, we will learn how to add a stroke to a triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the Fabric.Triangle class and add it to the canvas.

Our triangle 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.Triangle({ stroke : String }: Object)

Parameters

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

Options Keys

Stroke - This property accepts a String to determine the object's border s color.

Example 1

Passing strokes as keys with hexadecimal values strong>

Let’s see A code example to see how triangle objects appear when using the lines property. Hexadecimal color codes begin with "#" followed by a six-digit number representing the color. In this case, we used "#3cb371", which is Mid-Sea Green.

<!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 that the stroke around the triangle is of medium sea-green 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 triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: "#ecebbd",
         stroke: "#3cb371",
         strokeWidth: 7,
      });

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

Example 2

Pass rgba value to StrokeAttribute

In this example we will see how Specify an rgba value for the stroke attribute. 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 (46,139,87,0.8), which is a sea green 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 that the stroke colour is coming from the RGBA value now</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 triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: "#ecebbd",
         stroke: "rgba(46,139,87,0.8)",
         strokeWidth: 7,
      });

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

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

String 值传递对象 ul fabric

Statement：

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

Previous article：How to set the size of a rectangle's control corners using FabricJS?Next article：How to set the size of a rectangle's control corners using FabricJS?

See more