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

How to set the vertical scale factor of an ellipse using FabricJS?

PHPzforward: 2023-08-25 21:09:07584browse

如何使用 FabricJS 设置椭圆的垂直比例因子？

In this tutorial, we will learn how to set the vertical scale factor of an ellipse using FabricJS. The oval is one of the various shapes provided by FabricJS. In order to create an ellipse, we must create an instance of the Fabric.Ellipse class and add it to the canvas. Just as we can specify the position, color, opacity, and size of the ellipse object within the canvas, we can also set the vertical scale of the ellipse object. This can be done using the scaleY property.

Syntax

new fabric.Ellipse({ scaleY : Number }: Object)

Parameters

Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the object whose scaleY is the property.

Option Key

##scaleY - This property accepts numbers 强>value. The assigned value determines the vertical object scale factor. Its default value is 1.

Example 1

Default appearance when scaleY is not used

The following example shows the How the ellipse is displayed when using the

scaleY property. By default, ellipse objects have a vertical scale factor of 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>Setting the vertical scale factor of an Ellipse using FabricJS</h2>
      <p>Note that here we haven&#39;t set the vertical scale factor <b>scaleY</b> explicitly. By default, it is set to 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing scaleY attribute as key

In this example, we pass

scaleY Attribute as key, value is 2. This means that the scale factor of the ellipse object in the vertical direction is doubled.

<!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>Setting the vertical scale factor of an Ellipse using FabricJS</h2>
      <p>Here we have set <b>scaleY</b> to 2, so the vertical scale factor of the ellipse doubled. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            scaleY: 2,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

The above is the detailed content of How to set the vertical scale factor of an ellipse using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How do I access an object that contains spaces in the object key using JavaScript?Next article：How do I access an object that contains spaces in the object key using JavaScript?

See more

How to set the vertical scale factor of an ellipse using FabricJS?

Syntax

Parameters

Option Key

Related articles