Comment créer un canevas avec du texte en utilisant FabricJS ?-js tutoriel-php.cn

Comment créer un canevas avec du texte en utilisant FabricJS ?

王林

Libérer： 2023-08-24 16:49:05

avant

1531 Les gens l'ont consulté

如何使用 FabricJS 创建带有文本的画布？

Dans ce tutoriel, nous allons apprendre à créer un canevas avec un objet Texte à l'aide de FabricJS. Nous pouvons afficher du texte sur le canevas en ajoutant une instance de Fabric.Text. Non seulement il nous permet de déplacer, redimensionner et modifier les dimensions du texte, mais il fournit également des fonctionnalités supplémentaires telles que l'alignement du texte, la décoration du texte, la hauteur de ligne, qui sont disponibles respectivement via les propriétés textAlign, underline et lineHeight. Une différence entre Text et Textbox est que Textbox peut être modifié de manière interactive, contrairement à Text.

Grammaire

new fabric.Text( text: String , options: Object)

Copier après la connexion

Paramètres

text - Ce paramètre accepte String qui est la chaîne de texte que nous voulons afficher sous forme de texte.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre objet texte. Utilisez ce paramètre pour modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet texte.

Exemple 1

Créez une instance de Fabric.Text() et ajoutez-la au canevas

Regardons un exemple de code pour voir comment ajouter un objet texte au canevas. Le seul paramètre obligatoire est la chaîne de texte réelle, tandis que le deuxième paramètre est un objet d'options facultatif qui nous permet d'attribuer différentes propriétés à l'objet texte.

<!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>Creating an instance of fabric.Text() and adding it to our canvas</h2>
   <p>You can see the text in the canvas now</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 text object
      var text = new fabric.Text("Add sample text here", {
         left: 50,
         top: 70,
      });

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

Copier après la connexion

Exemple 2

Utilisez la méthode set pour faire fonctionner l'objet Texte

Dans cet exemple, nous attribuons une propriété à un objet texte à l'aide de la méthode set, qui est un paramètre pour la valeur. Toutes les propriétés liées au trait, à la largeur du trait, à l'angle, à l'échelle, à la rotation, etc. peuvent être modifiées à l'aide de cette méthode.

<!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>Manipulating the Text object by using the set method</h2>
   <p>You can see the text in the canvas now with set values</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 text object
      var text = new fabric.Text("Add sample text here");

      // Set the properties
      text.set("top", 70);
      text.set("left", 65);
      text.set("fill", "white");
      text.set("fontWeight", "bold");
      text.set("backgroundColor", "#bf94e4");

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

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!