How to flip a rectangle vertically using FabricJS?-JS Tutorial-php.cn

How to flip a rectangle vertically using FabricJS?

PHPz

Release： 2023-09-09 20:09:02

forward

1088 people have browsed it

如何使用 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)

Copy after login

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. < /p>

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 < p>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>

Copy after login

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>

Copy after login

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!