Home >Web Front-end >JS Tutorial >How to flip a triangle vertically using FabricJS?

How to flip a triangle vertically using FabricJS?

王林forward: 2023-08-23 20:29:131176browse

如何使用 FabricJS 垂直翻转三角形？

In this tutorial, we will learn how to flip a Triangle object vertically 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 flip the triangle object vertically using the flipY property.

Syntax

new fabric.Triangle({ flipY: Boolean }: 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 flipY is an attribute, such as color, cursor, stroke width, and many other properties.

Option Key

flipY - This property accepts a boolean value that allows us to vertically Flip the object.

Example 1

Passing FlipY as a key with a value of "false" p>

Let's look at a code example , which shows us the default orientation of triangle objects in FabricJS. Since we passed a False value to the flipY property, the triangle object does not flip vertically.

<!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 flipY as key with a &#39;false&#39; value</h2>
   <p>You can see that the triangle object has not been flipped vertically.</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: 75,
         top: 45,
         width: 180,
         height: 109,
         stroke: "#e3f988",
         strokeWidth: 5,
         flipY: false,
      });

      // Create gradient fill
      triangle.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
                  { offset: 0, color: "#545a2c" },
                  { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Example 2

Passing the FlipY attribute as a key with a value of "true"

In this example we have a width of 180px The triangle object has a height of 109px and a vertical linear gradient fill. When we apply the flipY property to the triangle object, it flips vertically, so we see the triangle flipped as well.

<!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 the flipY property as key with a &#39;true&#39; value</h2>
   <p>You can see that the triangle object has been flipped vertically</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: 75,
         top: 45,
         width: 180,
         height: 109,
         stroke: "#e3f988",
         strokeWidth: 5,
         flipY: true,
      });

      // Create gradient fill
      triangle.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
               { offset: 0, color:"#545a2c" },
               { offset: 1, color: "#6495ed" },
            ],
         })
      );

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

The above is the detailed content of How to flip a triangle vertically 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：How to stop forEach() method in JavaScript?Next article：How to stop forEach() method in JavaScript?

See more