search

Home  >  Article  >  Web Front-end  >  How to set the vertical scale factor of a rectangle using FabricJS?

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

王林
王林forward
2023-08-25 12:25:091379browse

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)

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>

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>

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!

对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：FabricJS - How to set the size of a line's control angle?Next article：FabricJS - How to set the size of a line's control angle?

Related articles

See more