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.
new fabric.Circle({ scaleY : Number }: Object)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.
##scaleY - This property accepts numbers value. The assigned value determines the vertical object scale factor. The default value is 1. < /em>
Default appearance when not using scaleY
Let’s look at one without usingscaleY 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>Passing scaleY property as key
In this example, we passscaleY 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
