Comment obtenir la couleur actuelle du caractère au niveau du curseur dans IText à l'aide de FabricJS ?-js tutoriel-php.cn

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

1175 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!