How to maintain the stroke width of a rectangle when scaling with FabricJS?-JS Tutorial-php.cn

How to maintain the stroke width of a rectangle when scaling with FabricJS?

WBOY

Release： 2023-08-23 08:57:29

forward

1056 people have browsed it

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)

Copy after login

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

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>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>

Copy after login

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>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>

Copy after login

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!