Comment définir la valeur de proportion minimale autorisée d'un triangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir la proportion minimale autorisée d'un triangle à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.

Nous pouvons personnaliser l'objet triangulaire en ajoutant un remplissage, en y ajoutant de la couleur, en supprimant sa bordure et même en modifiant sa taille. De même, nous pouvons également utiliser l'attribut minScaleLimit pour définir son échelle minimale autorisée.

Syntaxe

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

Paramètres

• Options< /strong> (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés liées à l'objet dont minScaleLimit est la propriété.

Options Keys

• minScaleLimit - Cette propriété accepte un Number comme valeur qui nous permet de contrôler la valeur d'échelle minimale autorisée par le triangle.

Exemple 1

Apparence par défaut d'un objet Triangle

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


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