Comment obtenir les limites correctes des mots dans IText à l'aide de FabricJS ?-js tutoriel-php.cn

Comment obtenir les limites correctes des mots dans IText à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-30 20:57:02

avant

1048 Les gens l'ont consulté

如何使用 FabricJS 获取 IText 中单词的正确边界？

Dans ce tutoriel, nous apprendrons comment obtenir les limites correctes des mots 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 également trouver la limite droite d'un mot en utilisant la méthode findWordBoundaryRight.

Grammaire

findWordBoundaryRight(startFrom: Number): Number

Copier après la connexion

Paramètres

startFrom - Ce paramètre accepte un Number représentant l'index de sélection actuel pour lequel le nouvel index de sélection de la valeur limite droite sera renvoyé.

Exemple 1

Utilisez la méthode findWordBoundaryRight

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode findWordBoundaryRight. Ici, nous passons une valeur de 5, ce qui signifie que nous voulons vérifier la limite droite du deuxième mot. La valeur de retour sera donc 10.

<!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 findWordBoundaryRight method</h2>
   <p>You can open console from dev tools and see that the right boundary 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 here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
      });
      // Add it to the canvas
      canvas.add(itext);

      // Using findWordBoundaryRight method
      console.log("The new selection index is: ",
      itext.findWordBoundaryRight(5));
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Calculez la limite du premier mot à l'aide de la méthode findWordBoundaryRight

Regardons un exemple de code sur la façon de trouver le nouvel index de sélection du premier mot à l'aide de la méthode findWordBoundaryRight. Dans cet exemple, nous avons passé la valeur 1 au paramètre startFrom, qui apparaîtra dans le premier mot. Par conséquent, la nouvelle valeur d’indice de sélection renvoyée est 3, ce qui correspond à la limite droite.

<!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 findWordBoundaryRight method to calculate the word boundary for the first word</h2>
   <p> You can open console from dev tools and see that the right boundary 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 here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
      });

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

      // Using findWordBoundaryRight method
      console.log("The new selection index is: ",
      itext.findWordBoundaryRight(1));
   </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!