Maison > Article > interface Web > Comment vérifier si un objet IText est renseigné à l'aide de FabricJS ?

Comment vérifier si un objet IText est renseigné à l'aide de FabricJS ?

王林avant: 2023-09-12 18:13:021145parcourir

如何使用 FabricJS 检查 IText 对象是否已填充？

Dans ce tutoriel, nous apprendrons comment vérifier si un objet IText est renseigné à 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 vérifier si l'objet IText est rempli à l'aide de la méthode hasFill.

Grammaire

hasFill()

Exemple 1

Utilisez la méthode hasFill lorsque vous utilisez un remplissage transparent

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode hasFill est utilisée avec un remplissage transparent. La méthode hasFill renvoie true si l'objet a une couleur de remplissage. Dans cet exemple, nous définissons la couleur de remplissage sur "Transparent". Par conséquent, la sortie enregistrée sera fausse.

<!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 hasFill method when transparent fill is used</h2>
   <p>You can open console from dev tools and see that the logged output is false</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: "transparent",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "black",
         }
      );

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

      // Using the hasFill method
      console.log("The value is: ", itext.hasFill());
   </script>
</body>
</html>

Exemple 2

Utilisez la méthode hasFill

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode hasFill. Dans ce cas, puisque l'objet IText a une couleur de remplissage, true sera renvoyé.

<!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 hasFill method</h2>
   <p>You can open console from dev tools and see that the value is being displayed in the console</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 HereLorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#b666d2",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "black",
         }
      );

      // Using the hasFill method
      console.log("The value is: ", itext.hasFill());

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

对象 fabric

Déclaration：

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

Article précédent：Comment convertir la date/heure UTC en date/heure locale à l'aide de JavaScript ?Article suivant：Comment convertir la date/heure UTC en date/heure locale à l'aide de JavaScript ?

Articles Liés

Voir plus