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

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

WBOY

Release： 2023-09-01 10:57:07

forward

1348 people have browsed it

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)

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em> 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. < /em>

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>  <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>
Copy after login
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>  <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>
Copy after login
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!