Home > Article > Web Front-end > How to create a triangle with a dashed pattern border using FabricJS?

How to create a triangle with a dashed pattern border using FabricJS?

WBOYforward: 2023-08-23 18:37:021037browse

如何使用 FabricJS 创建带有虚线图案边框的三角形？

In this tutorial, we will create a triangle with a dotted pattern border 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.

We can change the appearance of the border dash by using the borderDashArray property. However, our triangle object must have a border for this property to work. This property will have no effect if an incorrect value is specified for the hasBorders property.

Syntax

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

Parameters

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

Options Keys

borderDashArray - This property accepts a Array pattern that specifies dashes separated by array declarations.

Example 1

Passing borderDashArray as key with custom value

Let’s look at an example using FabricJS Code example for creating a dashed pattern border using the borderDashArray property. In this example, we're using a [7,10] array, which tells us that the pattern will be created by drawing a 7px long line, followed by a 10px gap, and repeating this same pattern over and over again.

<!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 borderDashArray as key with a custom value</h2>
   <p>Select the triangle to see the dash pattern</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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "red",
         borderDashArray: [7, 10],
      });

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

Example 2

Passing hasBorders key with value "false"

As we can see in this example, even if we have assigned properties borderColor and borderDashArray have the correct values, they have no effect because the hasBorders property is already set to false. When set to False, the object's bounding box is not rendered.

<!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 hasBorders key with the value "false"</h2>
   <p>Select the triangle and observe that its borders have not been rendered.</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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "red",
         borderDashArray: [7, 10],
         hasBorders: false,
      });

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

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

Array 对象 fabric

Statement：

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

Previous article：How to create conditional types in TypeScript?Next article：How to create conditional types in TypeScript?

See more