Comment créer une zone de texte avec une couleur d'arrière-plan à l'aide de FabricJS ?

Dans ce tutoriel, nous allons créer une zone de texte avec une couleur d'arrière-plan à l'aide de FabricJs. Nous pouvons personnaliser, étirer ou déplacer le texte écrit dans la zone de texte. Nous pouvons également personnaliser le texte lui-même à l'aide de propriétés telles que fontSize, fontFamily, fontStyle, fontWeight, etc. Afin de créer une zone de texte, nous devons créer une instance de la classe fabric.Textbox et l'ajouter au canevas. La propriété backgroundColor nous permet d'attribuer une couleur à l'arrière-plan de l'objet et à la forme de la zone de texte d'être un rectangle.

Syntax

new fabric.Textbox(text: String, { backgroundColor: String }: Object)

Parameters

• text- Ce paramètre accepte uneString, qui est la chaîne de texte que nous souhaitons utiliser. Vous souhaitez afficher dans notre zone de texte.

• Options(facultatif) - Ce paramètre est unobjetqui permet une personnalisation supplémentaire de notre zone de texte. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à la zone de texte dontbackgroundColorest la propriété.

< /ul>

Options Keys

• backgroundColor- Cette propriété accepte une valeurStringqui détermine la couleur d'arrière-plan.

Exemple 1

Passage de la propriété backgroundColor comme clé avec une valeur hexadécimale

Voyons un exemple de code pour attribuer une couleur d'arrière-plan à notre objet zone de texte en utilisant une valeur de couleur hexadécimale. Dans cet exemple, nous avons utilisé le code couleur hexadécimal "#ffe4e1" qui est une nuance de rouge très claire.

     
  
Passing backgroundColor property as key with a hexadecimal value
 
You can see that the background colour is a very light shade of red.
    

Copier après la connexion

Exemple 2

Passage de la propriété backgroundColor comme clé avec la valeur rgba

Nous pouvons utiliser des valeurs RGBA au lieu de codes de couleur hexadécimaux, cela signifie - rouge, vert, bleu et alpha. Le paramètre alpha spécifie l'opacité de la couleur. Dans cet exemple, nous avons utilisé les valeurs rgba (0,206,209,0.4) qui sont une couleur turquoise foncé avec une opacité de 0,4.

     
  
Passing backgroundColor property as key with an RGBA value
 
You can see that the background colour is a dark turquoise colour with 0.4 opacity.
    

Copier après la connexion

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!