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 Rectangle while scaling using FabricJS?
<p>In this tutorial, we are going to learn how we can maintain the stroke width of Rectangle 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="result notranslate">new fabric.Rect({ strokeUniform: Boolean }: Object)</pre><h2>Parameters</h2><ul class="list"><li><p><strong>Options (optional)</strong> − This parameter is an Object which provides additional customizations to our rectangle. 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 false.</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 rectangle 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>Try scaling the object in order to see the default behaviour</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 rectangle object var rect = new fabric.Rect({ left: 55, top: 90, width: 170, height: 70, fill: "#ccccff", padding: 9, stroke: "#483d8b", strokeWidth: 5, }); // Add it to the canvas canvas.add(rect); </script> </body> </html></pre><h2>Example</h2><p><strong>Passing strokeUniform property as key</strong></p><p>In this example, we are passing the strokeUniform 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>Try scaling the object in order to see that the stroke keeps a uniform width</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 rectangle object var rect = new fabric.Rect({ left: 55, top: 90, width: 170, height: 70, fill: "#ccccff", padding: 9, stroke: "#483d8b", strokeWidth: 5, strokeUniform: true, }); // Add it to the canvas canvas.add(rect); </script> </body> </html></pre>
110 Views
