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

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

WBOYavant: 2023-09-06 11:57:021481parcourir

如何使用 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 une String , 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 un objet qui 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 dont backgroundColor est la propriété.

Options Keys

backgroundColor - Cette propriété accepte une valeur String qui 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.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Passing backgroundColor property as key with a hexadecimal value</h2>
   <p>You can see that the background colour is a very light shade of red.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Details matter, it&#39;s worth waiting to get it right.", {
         backgroundColor: "#ffe4e1",
         width: 400,
         top: 70,
         left: 110,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Passing backgroundColor property as key with an RGBA value</h2>
   <p>You can see that the background colour is a dark turquoise colour with 0.4 opacity.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Details matter, it&#39;s worth waiting to get it right.", {
         backgroundColor: "rgba(0,206,209, 0.4)",
         width: 400,
         top: 70,
         left: 110,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment devenir développeur JavaScript ?Article suivant：Comment devenir développeur JavaScript ?

Articles Liés

Voir plus