Maison > Article > interface Web > Comment définir l'origine verticale de la transformation de texte à l'aide de FabricJS ?

Comment définir l'origine verticale de la transformation de texte à l'aide de FabricJS ?

王林avant: 2023-08-24 19:49:081466parcourir

Comment définir lorigine verticale de la transformation de texte à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir l'origine verticale des transformations de 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. De même, nous pouvons également utiliser l'attribut originY pour définir l'origine verticale de la transformation.

Grammaire

new fabric.Text(text: String , { originY : String }: Object)

Paramètres

text - Ce paramètre accepte une String, qui est la chaîne de texte que nous voulons afficher.
Options (facultatif) - Ce paramètre est un objet qui offre une personnalisation supplémentaire à notre texte. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés associées à l'objet dont originY est l'attribut.

Touche d'option

originY - Cette propriété accepte une valeur String qui nous permet de définir l'origine verticale de la transformation. Les valeurs possibles sont "Top", "Bottom" et "Center". Sa valeur par défaut est "top".

Exemple 1

Apparence par défaut des objets texte

Regardons un exemple de code pour voir à quoi ressemble un objet texte sans utiliser l'attribut originY. Dans ce cas, l'origine verticale de la transformation sera le haut, ce qui est également la valeur par défaut.

<!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>Default appearance of the Text object</h2>
   <p>You can see that the vertical origin of transformation is towards top</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.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
      });

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

Exemple 2

Passez l'attribut originY comme clé de valeur

Dans cet exemple, nous verrons comment l'attribution d'une valeur à la propriété originY modifie l'origine verticale de la transformation. Nous utilisons deux objets texte dans cet exemple pour montrer les différences. Dans notre premier objet texte, puisque nous avons passé la valeur "bottom", l'origine verticale de la transformation est maintenant en bas. Le même attribut supérieur de 100 est appliqué aux deux textes, mais comme l'origine verticale de la transformation change, ils se trouvent toujours dans des positions verticales différentes.

<!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 the originY property as key with a value</h2>
   <p>You can see that origin of transformation for the first text object(text1) is bottom while text2 maintains the default vertical origin of transformation</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 text1 = new fabric.Text("Text 1", {
         width: 300,
         left: 200,
         top: 100,
         fill: "green",
         originY: "bottom",
      });

      // Initiate a text object
      var text2 = new fabric.Text("Text 2", {
         width: 300,
         left: 50,
         top: 100,
         fill: "red",
      });

      // Add it to the canvas
      canvas.add(text1);
      canvas.add(text2);
   </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!

String 字符串值传递对象 fabric

Déclaration：

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

Article précédent：Comment fonctionne l’internationalisation en JavaScript ?Article suivant：Comment fonctionne l’internationalisation en JavaScript ?

Articles Liés

Voir plus