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

Dans ce tutoriel, nous apprendrons comment définir la largeur 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({ width: Number }: Object)

Paramètres

• < p>Options (facultatif) Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, il est possible de 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 pour lequel width est un attribut.

< /ul>

Option Key

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

Exemple 1

widthComportement par défaut de la propriété width< /p>

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

宽度属性的默认行为
可以看到三角形的宽度默认为100


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：60，
顶部：50，
填写：“#b0e0e6”，
身高：90，
});

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

Exemple 2

Passage de l'attribut width comme clé

Maintenant que nous avons attribué à l'attribut width une valeur de 180px, nous pouvons voir sa largeur changer.

 






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


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：60，
顶部：50，
填写：“#b0e0e6”，
身高：90，
宽度：180，
});

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