Heim > Artikel > Web-Frontend > Wie finde ich die Textfeldhöhe in IText mit FabricJS?

Wie finde ich die Textfeldhöhe in IText mit FabricJS?

王林nach vorne: 2023-09-14 15:17:161422Durchsuche

如何使用 FabricJS 查找 IText 中的文本框高度？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Höhe eines Textfelds 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 die Höhe des Textfelds mit der Methode calcTextHeight berechnen.

Grammatik

calcTextHeight()

Beispiel 1

Verwenden Sie die calcTextHeight-Methode

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn die calcTextHeight-Methode verwendet wird. In diesem Fall wird die Texthöhe zurückgegeben.

<!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 calcTextHeight method</h2>
   <p> You can open console from dev tools and see that the text height 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 calcTextHeight method
      console.log("The text height is: ", itext.calcTextHeight());
   </script>
</body>
</html>

Beispiel 2

Verwenden Sie die calcTextHeight-Methode, um die erhöhte Textfeldhöhe zu berechnen

In diesem Beispiel haben wir die Höhe des Textfelds absichtlich erhöht, indem wir zusätzliche Textzeilen hinzugefügt haben. Daher gibt die Methode calcTextHeight die erhöhte Höhe des Textfelds zurück, die in diesem Fall etwa 97,632 beträgt.

<!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 calcTextHeight method to calculate increased text box height
   <p> You can open console from dev tools and see that the text height value being displayed in the console has increased </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.Lorem ipsum dolor
      sit amet", {
         width: 300,
         left: 60,
         top: 70,
         fill: "red",
      });

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

      // Using calcTextHeight method
      console.log("The new text height is: ", itext.calcTextHeight());
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie finde ich die Textfeldhöhe in IText mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Wie kann ich mit JavaScript prüfen, ob ein Objekt leer ist?Nächster Artikel：Wie kann ich mit JavaScript prüfen, ob ein Objekt leer ist?

In Verbindung stehende Artikel

Mehr sehen