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

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


// 启动画布实例
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(三角形);

将 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(三角形);