Comment vérifier si un objet IText possède un attribut de style spécifique à l'aide de FabricJS ?-js tutoriel-php.cn

Comment vérifier si un objet IText possède un attribut de style spécifique à l'aide de FabricJS ?

王林

Libérer： 2023-08-24 23:09:10

avant

1395 Les gens l'ont consulté

如何使用 FabricJS 检查 IText 对象是否具有特定的样式属性？

Dans ce tutoriel, nous apprendrons comment vérifier si un objet IText possède un attribut de style spécifique à 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 utiliser la méthode styleHas pour vérifier si un objet IText possède un attribut de style spécifique.

Grammaire

styleHas(property: String, lineIndex: Number): Boolean

Copier après la connexion

Paramètres

property - Ce paramètre accepte une String représentant la propriété qui doit être vérifiée.
ineIndex - Ce paramètre accepte un Number indiquant l'index du style à vérifier.

Exemple 1

Utilisez la méthode styleHas

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode styleHas. Dans cet exemple, nous vérifions si l'attribut padding existe pour le caractère à l'index de la ligne 0. Puisque la valeur existe, une valeur vraie est renvoyée dans la console.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <scrip src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the styleHas method</h2>
   <p>You can open console from dev tools and see that a true 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 ", {
         width: 300,
         left: 50,
         top: 70,
         fontSize: 30,
         fill: "red",
         backgroundColor: "#fedad2",
         angle: 25,
         styles: {
            0: {
               1: {
                  fill: "blue",
                  fontStyle: "bold",
               },
            },
         },
      });

      // Using the styleHas method
      console.log("Is fill property present? : ", itext.styleHas("fill", 0));

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

Copier après la connexion

Exemple 2

Utilisez la méthode styleHas pour vérifier les valeurs inexistantes

Regardons un exemple de code pour voir à quoi ressemble la sortie enregistrée lors de l'utilisation de la méthode styleHas pour vérifier une valeur inexistante. Dans cet exemple, nous vérifions si l'attribut fontSize existe pour le caractère de la ligne 0. Puisqu'elle n'existe pas, une valeur d'erreur 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 styleHas method to check for a value that is not present</h2>
   <p>You can open console from dev tools and see that a false 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 ", {
         width: 300,
         left: 50,
         top: 70,
         fontSize: 30,
         fill: "red",
         backgroundColor: "#fedad2",
         angle: 25,
         styles: {
            0: {
               1: {
                  fill: "blue",
                  fontStyle: "bold",
               },
            },
         },
      });

      // Using the styleHas method
      console.log(
         "Is font size property present? : ",
          itext.styleHas("fontSize", 0)
      );

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