How to add a dashed stroke to a triangle using FabricJS?-JS Tutorial-php.cn

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

WBOY

Release： 2023-08-24 18:45:08

forward

1155 people have browsed it

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

Copy after login

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>

Copy after login

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>

Copy after login

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!