Comment définir la hauteur d'un triangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir la hauteur 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 manipuler l'objet triangle en changeant sa position, son opacité, son trait et ses dimensions. FabricJS nous permet de contrôler la taille des objets en utilisant les propriétés width et height.

Syntaxe

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

Paramètres

• Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées à l'objet dont hauteur est la propriété.

Option Key

• Height - Cette propriété accepte une valeur number qui nous permet de spécifier la hauteur de l'objet. Sa valeur par défaut est 100.

Exemple 1

heightComportement par défaut de la propriété

Regardons un exemple de code pour comprendre le comportement par défaut de la propriété height.

高度属性的默认行为
请注意，默认三角形的高度为 100。


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

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

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

Exemple 2

Passage de l'attribut height comme clé

Maintenant que nous avons une valeur de 140px attribuée à l'attribut height, nous pouvons voir sa hauteur changer.

 






将高度属性作为键传递
您可以看到三角形的高度现在固定为 140。


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

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

// 将其添加到画布中
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!