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

Dans ce tutoriel, nous apprendrons comment changer l'apparence d'un objet Triangle en changeant sa couleur de remplissage à 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 utiliser l'attribut fill, qui nous permet de spécifier la couleur du remplissage de l'objet.

Syntaxe

new Fabric.Triangle({ fill: String }: 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 les propriétés liées à l'objet pour lequel fill est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

< /ul>

Touche d'option

• fill - Cette propriété accepte une string qui nous permet de changer la couleur de remplissage de l'objet. Sa valeur par défaut est rgb(0,0,0), qui est noire.

Exemple 1

< strong>Couleur de remplissage par défaut pour les objets triangulaires

Regardons un exemple de code qui nous montre la couleur de remplissage par défaut pour les objets triangulaires dans FabricJS. Si nous ignorons complètement la propriété fill lors de la création de l'objet triangle, il sera rendu en noir avec la couleur de remplissage.

< !DOCTYPE html>






三角形对象的默认填充颜色
可以看到三角形的默认填充颜色是黑色


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
笔画：“#507d2a”，
笔划宽度：5，
});

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

Exemple 2

Passage de l'attribut fill comme clé

Nous pouvons également spécifier n'importe quel nom de couleur ou valeur RGBA pour l'attribut fill. Dans cet exemple, nous lui avons attribué une valeur « bleue », modifiant ainsi la couleur de remplissage en conséquence.

将 fill 属性作为键传递
可以看到三角形的填充颜色是蓝色


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
笔画：“#507d2a”，
笔划宽度：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!