How to set the minimum allowed proportion value of a triangle using FabricJS?

In this tutorial, we will learn how to set the minimum allowed proportion of a triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the Fabric.Triangle class and add it to the canvas.

We can customize the triangle object by adding padding, adding color to it, removing its border, and even changing its size. Likewise, we can also use the minScaleLimit property to set its minimum allowed scale.

Syntax

new Fabric.Triangle({ minScaleLimit : Number }: Object)

Parameters

• Options< /strong> (optional) - This parameter is a Object, which provides additional customization to our triangle. Using this parameter, you can change the color, cursor, border width, and many other properties associated with the object for which minScaleLimit is a property.

Options Keys

• minScaleLimit - This property accepts a Number as a value that allows us to control Minimum scale allowed for triangles.

Example 1

Default appearance of the Triangle object

Let's look at a code example to see how it works without minScaleLimit property is what the triangle object looks like. In this case we will be able to scale the object freely since no minimum limit is set.

三角形对象的默认外观
您可以缩放三角形对象以查看是否没有设置最小限制


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

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

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

Example 2

Passing the minScaleLimit property as a key with a custom value

In this example we You will see how assigning a value to the minScaleLimit property changes the minimum allowed scale value for triangle objects in the canvas. Here we are using 0.8 as the value, which means we will not be able to shrink the object to less than 72 pixels width and 64 pixels height, which is calculated by radius*limit (0.8 * 90 = 72 pixels) , 0.8 * 80 = 64px).

将 minScaleLimit 属性作为带有自定义值的键传递
您可以缩放三角形对象以查看是否设置了最小限制


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
最小比例限制：0.8，
});

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

The above is the detailed content of How to set the minimum allowed proportion value of a triangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!