How to create a canvas with a Triangle using FabricJS?-JS Tutorial-php.cn

How to create a canvas with a Triangle using FabricJS?

WBOY

Release： 2023-09-15 12:33:03

forward

739 people have browsed it

如何使用 FabricJS 创建带有 Triangle 的画布？

In this tutorial, we will learn how to create a canvas with a Triangle object 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.

Syntax

new fabric.Triangle({ width: Number, height: Number }: Object)

Copy after login

Parameters

Options(optional)− This parameter is a Object< /em> Provides additional customization to our triangle. Using this parameter, you can change the color, cursor, stroke width and other properties related to the triangle object, as well as its width and height are properties.

Option Key

Width − This property accepts a number that specifies the width. Its default value is 100.
Height - This property accepts a Number that specifies the height of the object. Its default value is 100.

Example 1

Create a Fabric.Triangle() instance and add it to the canvas

Let’s look at one Code example to learn how to add triangles to the canvas. Here we create an object with a width of 100px and a height of 70px. Additionally, we used the color "orange" as the fill color.

<!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>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
   <p>You can move around the triangle and interact with it</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: 55,
         top: 60,
         width: 100,
         height: 70,
         fill: "orange",
      });

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

Copy after login

Example 2

Use the set method to operate the Triangle object

In this example, we use the set method to be the setter of the value. Any properties related to stroke, stroke width, angle, scale, rotation, etc. can be changed using this method.

<!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>Manipulating the Triangle object by using the set method</h2>
   <p>You can move around the triangle and interact with it</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();

      // Set the properties
      triangle.set("height", 70);
      triangle.set("width", 100);
      triangle.set("stroke", "#2a52be");
      triangle.set("strokeWidth", 5);
      triangle.set("fill", "#d9603b");
      triangle.set("top", 60);
      triangle.set("left", 55);

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

Copy after login

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