Home > Article > Web Front-end > How to flip a triangle horizontally using FabricJS?

How to flip a triangle horizontally using FabricJS?

WBOYforward: 2023-09-14 18:09:061474browse

如何使用 FabricJS 水平翻转三角形？

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

Syntax

new fabric.Triangle({ flipX: Boolean }: 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 flipX is an attribute.

Option Key

flipX − This property accepts Boolean values Allows us to flip the object's value horizontally.

Example 1

Pass flipX as a key with a value of "false"

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

<!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 flipX as key with a &#39;False&#39; value</h2>
   <p>You can see that the triangle object has not been flipped horizontally</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,
         flipX: false,
      });

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

Example 2

Passing the flipX attribute as a key with a value of "True"

In this example, We have a triangle object with a width of 180px and a height of 109px, with a horizontal linear gradient fill. When we apply the flipX property to the triangle object, it flips horizontally, so we see the gradient 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 flipX property as key with a &#39;True&#39; value</h2>
   <p>You can see that the triangle has been flipped horizontally</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,
         flipX: true,
      });
      // Create gradient fill
      triangle.set( "fill", new fabric.Gradient({
         type: "linear", coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
         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 horizontally using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

对象 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 unpack array elements into separate variables using JavaScript?Next article：How to unpack array elements into separate variables using JavaScript?

See more