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

How to create a triangle with border color using FabricJS?

WBOYforward: 2023-09-12 12:29:021395browse

如何使用 FabricJS 创建带有边框颜色的三角形？

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

Because FabricJS is so flexible, we can customize our triangle objects in any way we like. One of the properties provided by FabricJS is borderColor, which allows us to manipulate the color of the border when the object is active.

Syntax

new fabric.Triangle({ borderColor: 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 borderColor is the property.

Option Key

borderColor - This property accepts a string that specifies the selection The color of the border of triangle objects. Its default value is rgb(178,204,255).

Example 1

Passing the borderColour key using a String value

Let's look at a code example to understand how to borderColor Property assignment. We have assigned the value "blue" to the borderColor key, which helps create a blue border when a triangle object is selected.

<!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 borderColour key with a String value</h2>
   <p>Select the triangle to see the border 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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "blue",
      });

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

Example 2

Pass an RGBA value to the borderColor key

instead of a simple color name as a string Pass, we can also use the RGBA value, whose components specify the amount of red, green, blue and alpha, where alpha represents opacity. In this example we used rgb(128,0,128) which is the purple rgb value.

<!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 borderColor key</h2>
   <p>Select the triangle to see the border 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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "rgb(128,0,128)",
      });

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

The above is the detailed content of How to create a triangle with border color 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 align an image on a card with a dynamic title in Javascript?Next article：How to align an image on a card with a dynamic title in Javascript?

See more