search

Home >Web Front-end >JS Tutorial >How to set the vertical scale factor of a Circle using FabricJS?

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBforward
2023-09-01 10:57:071533browse

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

In this tutorial, we will learn how to set the vertical scale factor of a circle using FabricJS. Circles are one of the various shapes provided by FabricJS. In order to create a circle, we must create an instance of the Fabric.Circle class and add it to the canvas. Just as we can specify the circular object's position, color, opacity, and size within the canvas, we can also set the vertical scale of the circular object. This can be done using the scaleY property.

Syntax

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

Parameters

  • Options (optional) - This parameter is a Object Provides additional customization for our circles. 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 numbers value. The assigned value determines the vertical object scale factor. The default value is 1.

Example 1

Default appearance when not using scaleY

Let’s look at one without using

scaleY An example of showing the appearance of a circular object when using the property. By default, circular 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 a Circle using FabricJS</h2>
      <p>Notice the vertical scale factor of the circle. Here we have not used the <b>scaleY</b> property, but by default, it is set to 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing scaleY property as key

In this example, we pass

scaleY Attribute as key, value is 2. This means that the scale factor of circular objects 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 a Circle using FabricJS</h2>
      <p>Notice the vertical scale factor of the circle. Here we have set <b>scaleY</b> at 2, so the object appears elongated on the Y-axis. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            fill: "#85bb65",
            scaleY: 2
         });
         canvas.add(circle);
         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 a Circle 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：JavaScript string prototype propertiesNext article：JavaScript string prototype properties

Related articles

See more