newfabric.Rect({strokeUniform:Boolean}:Objec"/> newfabric.Rect({strokeUniform:Boolean}:Objec">
Home > Article > Web Front-end > How to maintain the stroke width of a rectangle when scaling with FabricJS?
In this tutorial, we will learn how to maintain the stroke width of a rectangle when scaling using FabricJS. By default, the stroke width increases or decreases based on the object's scale value. However, we can disable this behavior by using the strokeUniform property.
new fabric.Rect({ strokeUniform: Boolean }: Object)
Options (optional)− This parameter is an object that provides additional customizations for the rectangle. definition. Using this parameter, you can change the color, cursor, stroke width, and many other properties related to the strokeUniform property.
strokeUniform− This property accepts a Boolean value, allowing us to specify whether the stroke width scales with the object. Its default value is false.
Default appearance of stroke width when scaling objects
Let's look at a code example that describes the default appearance of the stroke width of a rectangular object being scaled. Since we are not using the strokeUniform property, the stroke width will also be affected by the scaling of the object.
<!DOCTYPE html> The Chinese translation of <html> is: <html> <head> <!-- Add Fabric JS library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> The Chinese translation of </head> is: </head> The Chinese translation of <body> is: <body> <h2>Default appearance of stroke width when scaling objects</h2> <p>Try scaling the object to see the default behavior</p> <canvas id="canvas"></canvas> The Chinese translation of <script> is: <script> // Initialize a canvas instance var canvas = new fabric.Canvas("canvas"); Canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); // Initialize a rectangular object var rect = new fabric.Rect({ left: 55, top: 90, width: 170, height: 70, The Chinese translation of fill: "#ccccff", is: fill: "#ccccff", padding: 9, Stroke: "#483d8b", strokeWidth: 5, }); //Add it to the canvas Canvas.add(rect); </script> The Chinese translation of </body> is: </body> </html>
Passing strokeUniform property as key
In this In the example, we pass the strokeUniform property as the key and true as the value Therefore, the object's strokes will no longer increase or decrease The scaling of the object will ensure that the stroke always matches the pixel size exactly The input content is: entered for stroke width.
<!DOCTYPE html> The Chinese translation of <html> is: <html> <head> <!-- Add Fabric JS library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> The Chinese translation of </head> is: </head> The Chinese translation of <body> is: <body> <h2>Pass strokeUniform property as key</h2> <p>Try scaling the object to see that the stroke remains a uniform width</p> <canvas id="canvas"></canvas> The Chinese translation of <script> is: <script> // Initialize a canvas instance var canvas = new fabric.Canvas("canvas"); Canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); // Initialize a rectangular object var rect = new fabric.Rect({ left: 55, top: 90, width: 170, height: 70, The Chinese translation of fill: "#ccccff", is: fill: "#ccccff", padding: 9, Stroke: "#483d8b", strokeWidth: 5, strokeUniform: true, }); //Add it to the canvas Canvas.add(rect); </script> The Chinese translation of </body> is: </body> The translation of </html>is:
The above is the detailed content of How to maintain the stroke width of a rectangle when scaling with FabricJS?. For more information, please follow other related articles on the PHP Chinese website!