Comment définir l'opacité du triangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir l'opacité 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 triangle en ajoutant une couleur de remplissage, en supprimant ses bordures et même en modifiant ses dimensions. De même, nous pouvons également utiliser la propriété opacity pour modifier son opacité.

Syntaxe

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

Paramètres

• Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. A l'aide de 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 l'opacité est la propriété.

Option Key

• Opacity− Cette propriété accepte un number comme valeur qui nous permet de contrôler l'opacité de l'objet. La valeur par défaut de l'attribut d'opacité est 1.

Exemple 1

Apparence par défaut d'un objet Triangle

Regardons un exemple de code pour voir à quoi ressemble notre objet Triangle lors de l'utilisation de la valeur par défaut de la propriété opacity. Nous ne transmettrons aucune clé d'opacité à la classe comme le montre l'exemple suivant -

三角形对象的默认外观
请注意，三角形是完全不透明的。


// 启动画布实例
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é opacity comme clé

Dans cet exemple, nous verrons attribuer une propriété opacity Comment la valeur modifie l'opacité de l'objet triangle dans le canevas. Ici, nous utilisons 0,3 comme opacité, ce qui donne à notre objet triangle un aspect semi-transparent au lieu de complètement opaque.

将不透明度属性作为键传递
你可以看到我们的三角形并不是完全不透明


// 启动画布实例
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.3，
});

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