How to maintain the stroke width of a triangle when scaling using FabricJS?

In this tutorial, we will learn how to maintain the stroke width of a triangle 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.Triangle({ strokeUniform: Boolean }: Object)

Parameters

• Options (optional) - This parameter is a Object, which provides additional customization to our triangle. Using this parameter, you can change object-related properties such as color, cursor, stroke width, and many other properties. strikeUniform is a property of the object.

Option Key

• Stroke Unification - This property accepts a boolean value, allowing us Specifies whether the stroke width scales with the object. Its default value is false.

Example 1

Default appearance of stroke width when scaling an object

Let’s look at a code example that describes Changed the default appearance of the stroke width of triangle objects being scaled. Since we are not using the tripUniform property, the stroke width will also be affected by the object's scaling.

缩放对象时描边宽度的默认外观
选择三角形并尝试缩放它，可以看到缩放时描边宽度也发生变化


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：75，
宽度：90，
身高：80，
填写：“#ff878d”，
笔画: "#674846",
笔划宽度：5，
});

// 将其添加到画布中
canvas.add(三角形);

Example 2

Passing the strikeUniform attribute as a key

In this example we will strikeUniform Properties are passed as keys and True as values. As a result, the object's stroke will no longer increase or decrease as the object is scaled, which will ensure that the stroke always matches the exact pixel size entered for the stroke width.

将 strokeUniform 属性作为键传递
选择三角形并尝试缩放它，看看我们在缩放时具有固定的描边宽度


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：75，
宽度：90，
身高：80，
填写：“#ff878d”，
笔画: "#674846",
笔划宽度：5，
笔划统一：true，
});

// 将其添加到画布中
canvas.add(三角形);

The above is the detailed content of How to maintain the stroke width of a triangle when scaling using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!