How to set the vertical scale factor of a rectangle using FabricJS?-JS Tutorial-php.cn

How to set the vertical scale factor of a rectangle using FabricJS?

王林

Release： 2023-08-25 12:25:09

forward

1399 people have browsed it

How to set the vertical scale factor of a rectangle using FabricJS?

In this tutorial we will learn how to set the vertical scale factor of a rectangle Use FabricJS. Rectangle is one of the various shapes provided by FabricJS. for To create a rectangle we have to create an instance of the Fabric.Rect class and add it to the canvas.

Just like we can specify the position, color, opacity and size of the rectangular object In the canvas, we can also set the vertical scale of the rectangular object. this can be done By using the scaleY attribute.

Syntax

new fabric.Rect({ scaleY : 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 related to the object with scaleY as the attribute.

Option Key

scaleY - This property accepts a numeric value. The assigned value determines the vertical object scale factor. Its default value is 1.

Example 1

Default appearance when scaleY is not used

Let’s look at a code Example, when The scaleY property is not used. By default, the vertical scale factor of a rectangular object is 1.scaleY determines the transformation that resizes the object 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>Default appearance when scaleY is not used</h2>
   <p>You can see that there is no scaling along the Y-axis</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: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

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

Copy after login

Example 2

Passing scaleY attribute as key

In this example, we are passing scaleY attribute as key Pass a key with value 2. this Indicates that the scale factor of the rectangular object is doubled in the vertical direction.

<!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 scaleY property as key</h2>
   <p>You can see that the object&rsquo;s height has been doubled</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: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
         scaleY: 2,
      });

      // 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 vertical scale factor of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!