newfabric.Rect({strokeUniform:Boolean}:Objec"/> newfabric.Rect({strokeUniform:Boolean}:Objec">
search

Home  >  Article  >  Web Front-end  >  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?

WBOY
WBOYforward
2023-08-23 08:57:291081browse

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

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>

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

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to get the string between curly braces using JavaScript's regular expression?Next article：How to get the string between curly braces using JavaScript's regular expression?

Related articles

See more