search

Home  >  Article  >  Web Front-end  >  How to flip a rectangle vertically using FabricJS?

How to flip a rectangle vertically using FabricJS?

PHPz
PHPzforward
2023-09-09 20:09:021058browse

如何使用 FabricJS 垂直翻转矩形？

In this tutorial, we will learn how to flip a Rectangle object vertically using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we must create an instance of the Fabric.Rect class and add it to the canvas. We can flip the rectangular object vertically using the FlipY property.

Syntax

new fabric.Rect({ flipY: Boolean }: Object)

Parameters

  • Options (optional) - This parameter is a ## that provides additional customization #Object to our rectangle. Using this parameter, you can change the color, cursor, stroke width, and other properties related to the object with FlipY as the attribute.

Option Key

  • flipY - This property accepts a Boolean value that allows We flip the object vertically.

Example 1

Passing flipY as a key with a False value

Let’s Take a look at a code example that shows us the default orientation of a rectangle object in FabricJS. Since we passed a False value to the flipY property, the rectangular object will 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 False value</h2>
   <p>You can see that the object has not 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
         flipY: false,
      });

      // Create gradient fill
      rect.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 50 },
            colorStops: [
               { offset: 0, color: "pink" },
               { offset: 1, color: "blue" },
            ],
         })
      );

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

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

In this example, We have a rectangular object with a width of 170 px and a height of 70 px, with a vertical linear gradient fill. When we apply the FlipY property to the rectangular object, it flips vertically, 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 flipY property as key with a True value</h2>
   <p>You can see now that the object has 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
         flipY: true,
      });

      // Create gradient fill
      rect.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 50 },
            colorStops: [
               { offset: 0, color: "pink" },
               { offset: 1, color: "blue" },
            ],
         })
      );

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

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

对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to use JavaScript to change the input box border after filling it?Next article：How to use JavaScript to change the input box border after filling it?

Related articles

See more