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

How to add a dashed stroke to a triangle using FabricJS?

WBOYforward: 2023-08-24 18:45:081132browse

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

In this tutorial, we will learn how to add a dashed 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. The StrokeDashArray property allows us to specify a dash pattern for the object's strokes.

Syntax

new fabric.Triangle( { strokeDashArray: Array }: Object)

Parameters

Options (optional) - This parameter is an object , providing additional customization to our triangle. Using this parameter, you can change properties related to the object for which StrokeDashArray is a property, such as color, cursor, stroke width, and many other properties.

Option Key

Stroke DashArray - This property accepts an array which allows us Specifies the dashed pattern of the object's strokes. For example, if we pass an array with values [2,3], it represents a dash pattern of 2px dashes and 3px gaps, and this pattern repeats infinitely.

Example 1

Default appearance of object strokes

Let's look at an example describing the default appearance of triangle object strokes Code examples. Since we are not using the StrokeDashArray property, the dash pattern is not displayed.

<!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>Default appearance of an object&#39;s stroke</h2>
   <p>You can see there is no dash pattern in the 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 triangle object
      var triangle = new fabric.Triangle({
         left: 150,
         top: 30,
         width: 90,
         height: 80,
         fill: "#b0e0e6",
         stroke: "#5f9ea0",
         strokeWidth: 7,
      });

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

Example 2

Passing the StrikeDashArray property as a key

In this example, we pass a The value is [9,2]. This means that a dashed pattern will be created with a 9 pixels long line followed by a 2 pixels long gap, then again a 9 pixels long line drawn, and so on.

<!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 strokeDashArray property as key</h2>
   <p>You can see there is a dash pattern in the stroke 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: 150,
         top: 30,
         width: 90,
         height: 80,
         fill: "#b0e0e6",
         stroke: "#5f9ea0",
         strokeWidth: 7,
         strokeDashArray: [9, 2],
      });

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

The above is the detailed content of How to add a dashed stroke to a triangle 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：Access elements in typescriptNext article：Access elements in typescript

See more