How to set the tilt angle of the Y-axis of a rectangle using FabricJS?-JS Tutorial-php.cn

How to set the tilt angle of the Y-axis of a rectangle using FabricJS?

WBOY

Release： 2023-09-09 21:33:03

forward

1259 people have browsed it

如何使用 FabricJS 设置矩形 Y 轴的倾斜角度？

In this tutorial we will learn how to set the tilt angle on the y-axis Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle we have to create an instance fabric.Rect class and add it to the canvas.

Our rectangular object can be customized in many ways, such as changing its dimensions, Add a background color or change the tilt angle on the Y-axis. what we can do This is accomplished using the skewY attribute.

Syntax

new fabric.Rect({ skewY : Number }: Object)

Copy after login

Parameters

Options (optional) - This parameter is an object which is our rectangle Provides additional customization. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties associated with the object for which skewY is the attribute.

Option Key

skewY - This property accepts a that determines the angle NumberThe tilt of the object on the y-axis.

Example 1

When the skewY attribute is not applied

Let's look at a code example to understand when the skewY attribute is not appliedskewY attribute, how our rectangle object is displayed. In this case, we won't have any angle tilt in our rectangular object.

<!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>When the skewY property is not applied</h2>
   <p>You can see there is no skew by any angle on the rectangle by default</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: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#8f9779",
         stroke: "#8fbc8f",
         strokeWidth: 9,
      });

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

Copy after login

Example 2

Pass skewY as the key and assign it a custom value.

In this example, we will see how to assign the value of skewY property. The value passed will determine the tilt along the Y-axis.

<!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 skewY as key and assigning a custom value to it</h2>
   <p>You can see the rectangle has been skewed by 30 degrees along the Yaxis</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: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#8f9779",
         stroke: "#8fbc8f",
         strokeWidth: 9,
         skewY: 30,
      });

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

Copy after login

The above is the detailed content of How to set the tilt angle of the Y-axis of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!