Comment obtenir la limite gauche d'un mot dans IText en utilisant FabricJS ?-js tutoriel-php.cn

Comment obtenir la limite gauche d'un mot dans IText en utilisant FabricJS ?

WBOY

Libérer： 2023-09-10 14:21:05

avant

1137 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment obtenir la limite gauche d'un mot 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, on peut également trouver la limite gauche d'un mot en utilisant la méthode findWordBoundaryLeft

Grammaire

findWordBoundaryLeft(startFrom: Number): Number

Copier après la connexion

Paramètres

startFrom - Ce paramètre accepte un Number qui représente l'index de sélection actuel pour lequel la nouvelle valeur de l'index de sélection de la limite gauche du mot sera renvoyée.

Exemple 1

Utilisez la méthode findWordBoundaryLeft

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

<!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 findWordBoundaryLeft method</h2>
   <p> You can open console from dev tools and see that the left 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: 110,
         top: 70,
         fill: "red",
      });

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

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

Copier après la connexion

Exemple 2

Utilisez la méthode findWordBoundaryLeft pour calculer la limite du mot du dernier mot

Regardons un exemple de code sur la façon de trouver le nouvel index de sélection du dernier mot à l'aide de la méthode findWordBoundaryLeft. Dans cet exemple, nous avons passé la valeur 17 au paramètre startFrom, qui représente le dernier mot. Par conséquent, la nouvelle valeur d’index de sélection renvoyée est 16, qui correspond à la limite gauche du dernier mot.

<!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 findWordBoundaryLeft method to calculate the word boundary for the last word</h2>
   <p> You can open console from dev tools and see that the left 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: 110,
         top: 70,
         fill: "red",
      });

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

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