Wie erhalte ich mit FabricJS die linke Grenze eines Wortes in IText?-js-Tutorial-php.cn

Wie erhalte ich mit FabricJS die linke Grenze eines Wortes in IText?

WBOY

Freigeben： 2023-09-10 14:21:05

nach vorne

1136 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die linke Grenze eines Wortes 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 findWordBoundaryLeft

auch die linke Grenze eines Wortes finden

Grammatik

findWordBoundaryLeft(startFrom: Number): Number

Nach dem Login kopieren

Parameter

startFrom – Dieser Parameter akzeptiert eine Number, die den aktuellen Auswahlindex darstellt, für den der neue Auswahlindexwert der linken Grenze des Wortes zurückgegeben wird.

Beispiel 1

Verwenden Sie die findWordBoundaryLeft-Methode

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

Nach dem Login kopieren

Beispiel 2

Verwenden Sie die Methode findWordBoundaryLeft, um die Wortgrenze des letzten Wortes zu berechnen

Sehen wir uns ein Codebeispiel an, wie man mit der Methode findWordBoundaryLeft den neuen Auswahlindex des letzten Wortes findet. In diesem Beispiel haben wir den Wert 17 an den Parameter startFrom übergeben, der das letzte Wort darstellt. Daher ist der zurückgegebene neue Auswahlindexwert 16, was der linken Grenze des letzten Wortes entspricht.

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

Nach dem Login kopieren

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