Maison > Article > interface Web > Comment obtenir la déclaration de style complète d'un caractère dans IText à l'aide de FabricJS ?

Comment obtenir la déclaration de style complète d'un caractère dans IText à l'aide de FabricJS ?

王林avant: 2023-09-17 11:57:03769parcourir

Comment obtenir la déclaration de style complète dun caractère dans IText à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment obtenir la déclaration de style complète d'un caractère dans IText à l'aide de FabricJS. La classe IText a été introduite dans FabricJS version 1.4, qui étend Fabric.Text et est utilisée pour créer des instances IText. Les instances IText nous donnent la liberté de sélectionner, couper, coller ou ajouter un nouveau texte sans configuration supplémentaire. Il existe également diverses combinaisons de touches et combinaisons souris/tactile prises en charge pour rendre le texte interactif qui ne sont pas disponibles dans Texte.

Cependant, Textbox basé sur IText nous permet de redimensionner le rectangle de texte et de l'envelopper automatiquement. Ce n'est pas le cas pour IText, car la hauteur ne s'ajuste pas en fonction des sauts de ligne. Nous pouvons manipuler des objets IText en utilisant diverses propriétés. De même, nous pouvons obtenir la déclaration de style complète d'un caractère en utilisant la méthode getCompleteStyleDeclaration.

Grammaire

getCompleteStyleDeclaraction(lineIndex: Number, charIndex: Number): Object

Paramètres

lineIndex - Ce paramètre accepte un Number qui spécifie le numéro de ligne des caractères requis.
charIndex - Ce paramètre accepte un number représentant la position du caractère sur la ligne.

Exemple 1

Utilisez la méthode getCompleteStyleDeclaration

Regardons un exemple de code pour voir à quoi ressemble un objet IText lors de l'utilisation de la méthode getCompleteStyleDeclaration. Dans ce cas, nous renvoyons la déclaration de style complète pour le deuxième caractère de la ligne 0. Le personnage s'est vu attribuer une couleur d'arrière-plan de texte jaune clair.

<!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>Using the getCompleteStyleDeclaration method</h2>
   <p>You can open console from dev tools and see the style declaration for 2nd character of the first line</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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit ametconsectetur adipiscing elit.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "red",
            styles: {
               0: {
                  1: {
                     textBackgroundColor: "rgba(253,255,214,0.9)",
                  },
               },
            },
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using getCompleteStyleDeclaration method
      console.log(
         "The style object is as follows: ",
         itext.getCompleteStyleDeclaration(0, 1)
      );
   </script>
</body>
</html>

Exemple 2

Utilisez la méthode getCompleteStyleDeclaration pour la comparaison

Regardons un exemple de code pour comparer les déclarations de style pour deux caractères au même index dans deux lignes différentes. Dans cet exemple, nous avons sélectionné le deuxième caractère des lignes 1 et 2, ils ont donc été mis en évidence avec des couleurs d'arrière-plan de texte différentes. Puisque nous avons spécifié différentes couleurs de remplissage, textBackgroundColor et fontSize pour ces deux caractères, ces valeurs seront reflétées dans notre console et nous pourrons comparer les modifications.

<!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>Using the getCompleteStyleDeclaration method for comparison</h2>
   <p>You can open console from dev tools and see the style declaration for both lines</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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "red",
            styles: {
               0: {
                  1: {
                     textBackgroundColor: "rgba(130,111,201,0.6)",
                     fontSize: 30,
                     fill: "black",
                  },
               },
               1: {
                  1: {
                     textBackgroundColor: "rgba(52,235,189,0.5)",
                     fontSize: 90,
                     fill: "green",
                  },
               },
            },
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using getCompleteStyleDeclaration method
      console.log(
         "The style object for 2nd character of 1st line is as follows: ",
         itext.getCompleteStyleDeclaration(0, 1)
      );
      console.log(
         "The style object for 2nd character of 2nd line is as follows: ",
         itext.getCompleteStyleDeclaration(1, 1)
      );
   </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!

number 对象 fabric

Déclaration：

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

Article précédent：Comment ajouter du contenu à une section en utilisant jQuery/JavaScript ?Article suivant：Comment ajouter du contenu à une section en utilisant jQuery/JavaScript ?

Articles Liés

Voir plus