Heim > Artikel > Web-Frontend > Wie erhalte ich mit FabricJS korrekte Wortgrenzen in IText?

Wie erhalte ich mit FabricJS korrekte Wortgrenzen in IText?

WBOYnach vorne: 2023-08-30 20:57:02960Durchsuche

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die korrekten Wortgrenzen in IText ermitteln. Die IText-Klasse wurde in FabricJS Version 1.4 eingeführt, die Fabric.Text erweitert und zum Erstellen von IText-Instanzen verwendet wird. IText-Instanzen geben uns die Freiheit, ohne zusätzliche Konfiguration neuen Text auszuwählen, auszuschneiden, einzufügen oder hinzuzufügen. Es gibt auch verschiedene unterstützte Tastenkombinationen und Maus-/Touch-Kombinationen, um Text interaktiv zu gestalten, die in Text nicht verfügbar sind.

Mit der auf IText basierenden Textbox können wir jedoch die Größe des Textrechtecks ändern und es automatisch umbrechen. Dies ist bei IText nicht der Fall, da sich die Höhe nicht anhand von Zeilenumbrüchen anpasst. Wir können IText-Objekte mithilfe verschiedener Eigenschaften manipulieren. Ebenso können wir mit der Methode findWordBoundaryRight auch die rechte Grenze eines Wortes finden.

Grammatik

findWordBoundaryRight(startFrom: Number): Number

Parameter

startFrom – Dieser Parameter akzeptiert eine Number, die den aktuellen Auswahlindex darstellt, für den der neue Auswahlindex des rechten Grenzwerts zurückgegeben wird.

Beispiel 1

Verwenden Sie die findWordBoundaryRight-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode findWordBoundaryRight zu sehen. Hier übergeben wir einen Wert von 5, was bedeutet, dass wir die rechte Grenze des zweiten Wortes überprüfen wollen. Der Rückgabewert beträgt also 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>

Beispiel 2

Berechnen Sie die Wortgrenze des ersten Wortes mit der Methode findWordBoundaryRight

Sehen wir uns ein Codebeispiel an, wie man mit der Methode findWordBoundaryRight den neuen Auswahlindex des ersten Wortes findet. In diesem Beispiel haben wir den Wert 1 an den Parameter startFrom übergeben, der im ersten Wort erscheint. Daher ist der zurückgegebene neue Auswahlindexwert 3, was die rechte Grenze darstellt.

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

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit FabricJS korrekte Wortgrenzen in IText?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Erste Schritte mit Paper.js: Pfade und GeometrieNächster Artikel：Erste Schritte mit Paper.js: Pfade und Geometrie

In Verbindung stehende Artikel

Mehr sehen