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

Regardons un exemple de code pour voir à quoi ressemble un objet triangle sans utiliser la propriété minScaleLimit. Dans ce cas, nous pourrons redimensionner l'objet librement puisqu'aucune limite minimale n'est définie.

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


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

Exemple 2

Passer la propriété minScaleLimit en tant que clé avec une valeur personnalisée

Dans cet exemple, nous verrons comment l'attribution d'une valeur à la propriété minScaleLimit modifie l'échelle minimale autorisée d'un objet triangulaire dans la valeur de la toile. Ici, nous utilisons 0,8 comme valeur, ce qui signifie que nous ne pourrons pas réduire l'objet à moins de 72 pixels de largeur et 64 pixels de hauteur, ce qui est calculé par rayon* limite (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(三角形);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!