Comment définir la couleur d'arrière-plan de la sélection triangulaire à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir la couleur d'arrière-plan d'une sélection triangulaire à 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 modifier la taille de l'objet, le faire pivoter ou opérer dessus lorsqu'il est activement sélectionné. Nous pouvons utiliser la propriété selectionBackgroundColor pour changer la couleur d'arrière-plan de la sélection triangulaire.

Syntaxe

new Fabric.Triangle({ SelectionBackgroundColor : 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 dont selectionBackgroundColor est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

Option Key

• selectionBackgroundColor - Cette propriété accepte une valeur String. La valeur attribuée détermine la couleur d'arrière-plan de la sélection.

Exemple 1

selectionBackgroundColor Couleur par défaut lorsque la propriété em> n'est pas utilisée

Regardons un exemple de code pour voir comment la sélection est affichée lorsque la propriété selectionBackgroundColor n'est pas utilisée. À partir de cet exemple, nous pouvons voir que la zone de sélection ou la zone derrière l'objet n'a pas de couleur.

不使用selectionBackgroundColor属性时的默认颜色
可以选择三角形，可以看到选择区域没有颜色。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：70，
宽度：90，
身高：80，
填写：“#228b22”，
笔画：“#d8e4bc”，
笔画宽度：7，
填充：30，
});

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

Exemple 2

Passage de la propriété selectionBackgroundColor comme clé

Dans cet exemple, nous attribuons une valeur à la propriété selectionBackgroundColor. Dans ce cas, nous lui avons transmis la valeur hexadécimale "da70d6", qui est magenta, donc la zone de sélection a cette couleur.

将selectionBackgroundColor属性作为键传递
您可以选择三角形以查看选择区域现在具有洋红色


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：70，
宽度：90，
身高：80，
填写：“#228b22”，
笔画：“#d8e4bc”，
笔画宽度：7，
填充：30，
选择背景颜色：“#da70d6”，
});

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