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


<p>In this tutorial, we are going to learn how to set the vertical scale factor of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of <em>fabric.Triangle</em> class and add it to the canvas.</p><p>Just as we can specify the position, colour, opacity and dimension of a triangle object in the canvas, we can also set the vertical scale of a triangle object. This can be done by using the <em>scaleY</em> property.</p><h2>Syntax</h2><pre class="just-code notranslate language-javascript" data-lang="javascript">new fabric.Triangle({ scaleY : Number }: Object)</pre><h2>Parameters</h2><ul class="list"><li><p><strong>Options</strong><strong> (optional) </strong>− This parameter is an <em>Object</em> which provides additional customizations to our triangle. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which <em>scaleY</em> is a property.</p></li></ul><h2>Options Keys</h2><ul class="list"><li><p><strong>scaleY</strong> − This property accepts a <strong>Number</strong> value. The value that is assigned, determines the vertical object scale factor. Its default value is 1.</p></li></ul><h2>Example 1</h2><p><strong>Default appearance when <em>scaleY</em> is not used</strong></p><p>Let's see a code example that displays the appearance of our triangle object when the <em>scaleY</em> property is not used. By default, the vertical scale factor of the triangle object is 1. scaleY determines the transformation that resizes an object along the Y-axis.</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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 resizing 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 triangle object       var triangle = new fabric.Triangle({          left: 105,          top: 70,          width: 90,          height: 80,          fill: "#746cc0",          stroke: "#967bb6",          strokeWidth: 5,       });       // Add it to the canvas       canvas.add(triangle);    </script> </body> </html></pre><h2>Example 2</h2><p><strong>Passing <em>scaleY</em> property as key</strong></p><p>In this example, we are passing the <em>scaleY</em> property as a key with a value of 2. This means that the triangle object's scale factor in the vertical direction is doubled.</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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 objects vertical width 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 triangle object       var triangle = new fabric.Triangle({          left: 105,          top: 30,          width: 90,          height: 80,          fill: "#746cc0",          stroke: "#967bb6",          strokeWidth: 5,          scaleY: 2,       });       // Add it to the canvas       canvas.add(triangle);    </script> </body> </html></pre>

Updated on: 27-Jun-2022

59 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements