Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to maintain stroke width of a Triangle while scaling using FabricJS?
<p>In this tutorial, we are going to learn how we can maintain the stroke width of Triangle while scaling using FabricJS. By default, the stroke width increases or decreases with respect to the object's scale values. However, we can disable this behaviour by using the <em>strokeUniform</em> property.</p><h2>Syntax</h2><pre class="just-code notranslate language-javascript" data-lang="javascript">new fabric.Triangle({ strokeUniform: Boolean }: 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>strokeUniform</em> is a property.</p></li></ul><h2>Options Keys</h2><ul class="list"><li><p><strong>strokeUniform</strong> − This property accepts a <strong>Boolean</strong> value which allows us to specify whether the stroke width will be scaled along with the object or not. Its default value is <em>false</em>.</p></li></ul><h2>Example 1</h2><p><strong>Default appearance of stroke width while scaling the object</strong></p><p>Let's see a code example that depicts the default appearance of the stroke width of a triangle object that is being scaled. Since we have not used the <em>strokeUniform</em> property, the stroke width will also get affected by the object's scaling.</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 of stroke width while scaling the object</h2> <p>Select the triangle and try scaling it to see that the stroke width also changes while scaling</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: 75, width: 90, height: 80, fill: "#ff878d", stroke: "#674846", strokeWidth: 5, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html></pre><h2>Example 2</h2><p><strong>Passing <em>strokeUniform</em> property as key</strong></p><p>In this example, we are passing the <em>strokeUniform</em> property as key with True as value. Therefore, the object's stroke will no longer increase or decrease with respect to the object's scaling and this will ensure that the stroke always matches the exact pixel size entered for stroke width.</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 strokeUniform property as key</h2> <p>Select the triangle and try scaling it to see that we have fixed stoke width while scaling</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: 75, width: 90, height: 80, fill: "#ff878d", stroke: "#674846", strokeWidth: 5, strokeUniform: true, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html></pre>
93 Views
