Comment rendre le triangle invisible avec FabricJS ?

Dans ce tutoriel, nous apprendrons comment rendre un triangle invisible à 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.

Notre objet triangle peut être personnalisé de nombreuses manières, comme en changeant ses dimensions, en ajoutant une couleur de fond ou en le rendant visible ou invisible. Nous pouvons le faire en utilisant l'attribut visible.

Syntaxe

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

Options Keys

• visible - Cette propriété accepte une valeur Boolean qui nous permet de restituer un objet sur le canevas. Sa valeur par défaut est vraie.

Exemple 1

Passage de l'attribut visible comme valeur avec la clé avec "true"

Voyons un exemple de code pour comprendre ce qui se passe lorsque nous transmettons la vraie valeur à l'attribut visible. En spécifiant la valeur « true », nous garantissons que l'objet triangle est rendu sur le canevas. C'est également le comportement par défaut dans FabricJS.

将可见属性作为具有“true”值的键传递
您可以看到三角形对象已渲染到画布上


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

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

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

Exemple 2

Passer l'attribut visible comme clé avec une valeur de "false"

Dans cet exemple, nous transmettons l'attribut visible comme clé avec une valeur de false. L'attribution d'une valeur fausse garantira que notre objet triangle ne s'affichera pas sur le canevas. Cela ne rend tout simplement pas l'objet "invisible", mais le supprime complètement. Il peut être utilisé pour supprimer un objet du canevas sans supprimer son code.

将可见属性作为带有“false”值的键传递
您可以看到三角形对象尚未渲染到画布上。


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

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

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