Maison > interface Web > js tutoriel > le corps du texte

Comment obtenir la couleur actuelle du caractère au niveau du curseur dans IText à l'aide de FabricJS ?

WBOY
Libérer: 2023-09-13 15:37:02
avant
1114 Les gens l'ont consulté

Comment obtenir la couleur actuelle du caractère au niveau du curseur dans IText à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment obtenir la couleur actuelle du caractère au niveau du curseur 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 couleur des caractères du curseur en utilisant la méthode getCurrentCharColor. Cependant, si l'objet itext a un motif, un dégradé ou un remplissage, la couleur du caractère au niveau du curseur actuel sera renvoyée. La couleur de remplissage par défaut pour les objets iText est rgb(0,0,0), qui est la couleur « noir ». Par conséquent, si rien n’est spécifié, rgb(0,0,0) sera renvoyé comme sortie enregistrée.

Grammaire

getCurrentCharColor(): String | fabric.Gradient | fabric.Pattern
Copier après la connexion

Exemple 1

Utilisez la méthode getCurrentCharColor pour obtenir la valeur par défaut

Regardons un exemple de code pour voir comment la méthode getCurrentCharColor se comporte lorsqu'aucune couleur de remplissage n'est fournie. La sortie enregistrée renverra la couleur des caractères 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>Using the getCurrentCharColor method to get default value</h2>
   <p>You can open console from dev tools and see the logged output</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,
         }
      );

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

      // Using getCurrentCharColor method
      console.log("The current character colour is: ",
      itext.getCurrentCharColor());
   </script>
</body>
</html>
Copier après la connexion

Exemple 2

Utilisez la méthode getCurrentCharColor sur un objet itext avec padding

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation du remplissage. Comme nous pouvons le voir, la couleur du remplissage est renvoyée.

<!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 getCurrentCharColor method for an itext object with fill</h2>
   <p>You can open console from dev tools and see the logged output for fill</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",
         }
      );

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

      // Using getCurrentCharColor method
      console.log(
         "The current character colour is: ",
         itext.getCurrentCharColor()
      );
   </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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal