Maison > Article > interface Web > Comment déplacer la ligne de base d'un seul caractère dans un texte à l'aide de FabricJS ?

Comment déplacer la ligne de base d'un seul caractère dans un texte à l'aide de FabricJS ?

PHPzavant: 2023-09-01 17:05:031362parcourir

如何使用 FabricJS 移动文本中单个字符的基线？

Dans ce tutoriel, nous apprendrons comment déplacer la ligne de base d'un seul caractère dans un 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 la propriété deltaY pour déplacer la ligne de base d'un seul caractère.

Grammaire

new fabric.Text(text: String , { styles: { deltaY: Number}:Object }: 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. Utilisez ce paramètre pour modifier la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés associées à l'objet dont le style est une propriété.

Touche d'option

styles - Cette propriété accepte une valeur Object qui nous permet d'ajouter des styles à des caractères individuels.
deltaY - Cette propriété accepte une valeur Number qui nous permet de déplacer uniquement la ligne de base du style.

Exemple 1

Ne transmettre que l'attribut styles comme clé

Dans cet exemple, nous pouvons voir comment ajouter des styles individuels aux caractères à l'aide de l'attribut styles. Comme nous pouvons le voir dans cet exemple, seul le 0ème caractère a une fontSize de 55, un fontWeight de bold et un fontStyle de "oblique". L'attribut de premier niveau est le numéro de ligne et l'attribut de deuxième niveau est le symbole du caractère. Ici, nous utilisons 0 pour représenter la première ligne et le premier caractère.

<!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 styles property as key</h2>
   <p>You can see that the first character looks different 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.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
         styles: {
            0: {
               0: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fontStyle: "oblique",
               }
            }
         }
      });

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

Exemple 2

Passez l'attribut styles comme clé avec l'attribut deltaY

Dans cet exemple, nous verrons comment ajouter différentes lignes de base aux caractères à l'aide de la propriété deltaY. Dans ce cas, le deuxième nombre de la première ligne (le premier index) a une ligne de base différente de son caractère adjacent car deltaY est spécifié.

<!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 styles property as key along with deltaY property</h2>
   <p> You can see that the second number in the first line has a different baseline </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. H2O", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
         styles: {
            1: {
               0: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fill: "red",
               },
               1: {
                  deltaY: 15,
                  fill: "blue",
               },
               2: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fill: "red",
               },
            },
         },
      });

      // Add it to the canvas
      canvas.add(text);
   </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 Object 字符串 number 对象 fabric

Déclaration：

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

Article précédent：Commençons par la bibliothèque d'animation Mojs : composants HTMLArticle suivant：Commençons par la bibliothèque d'animation Mojs : composants HTML

Articles Liés

Voir plus