Web Front-end
JS Tutorial
How to maintain the stroke width of a rectangle when scaling with FabricJS?
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.
Syntax
new fabric.Rect({ strokeUniform: Boolean }: Object)Parameters< ;/h2>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.
Option Key
strokeUniform< /strong>− This property accepts a Boolean value, allowing us to specify whether the stroke width scales with the object. Its default value is false.
Example 1
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< /strong>− 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< /p>
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 id="Default-appearance-of-stroke-width-when-scaling-objects">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>Example
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 id="Pass-strokeUniform-property-as-key">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>