Heim > Artikel > Web-Frontend > Wie berechnet man mit FabricJS die Höhe eines Zeichens an einer bestimmten Position im Text?

Wie berechnet man mit FabricJS die Höhe eines Zeichens an einer bestimmten Position im Text?

WBOYnach vorne: 2023-08-25 08:29:02530Durchsuche

如何使用 FabricJS 计算文本中给定位置的字符高度？

In diesem Tutorial lernen wir, wie man mit FabricJS die Zeilenhöhe am gewünschten Zeilenindex im Text berechnet. Wir können Text auf der Leinwand anzeigen, indem wir eine Instanz von Fabric.Text hinzufügen. Es ermöglicht uns nicht nur das Verschieben, Skalieren und Ändern der Textabmessungen, sondern bietet auch zusätzliche Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight verfügbar sind. Wir können die Zeilenhöhe auch am gewünschten Zeilenindex mit der Methode getHeightOfLine berechnen.

Grammatik

getHeightOfLine(lineIndex: Number)

Parameter

lineIndex – Dieser Parameter akzeptiert Number als Wert. Der angegebene Wert bestimmt den Index der Linie, deren Höhe wir berechnen möchten.

Beispiel 1

Verwenden Sie die getHeightOfLine-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der getHeightOfLine-Methode zu sehen. In diesem Fall wird die Höhe der Zeile am Zeilenindex 1 in der Konsole angezeigt.

<!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 getHeightOfLine method</h2>
   <p>You can open console from dev tools and see that the height of line 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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

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

      // Using getHeightOfLine method
      console.log("The height of line is", text.getHeightOfLine(1));
   </script>
</body>
</html>

Beispiel 2

Verwenden Sie die getHeightOfLine-Methode und übergeben Sie eine andere Schriftgröße

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die getHeightOfLine-Methode mit der anderen Schriftgröße 30 verwendet wird. In diesem Fall wird die Zeilenhöhe am Zeilenindex 0 mit der angegebenen Schriftgröße angezeigt.

<!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 getHeightOfLine method and passing a different font size</h2>
   <p>You can open console from dev tools and see that the height of line 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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         fontSize: 30
      });

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

      // Using getHeightOfLine method
      console.log("The height of line is", text.getHeightOfLine(0));
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie berechnet man mit FabricJS die Höhe eines Zeichens an einer bestimmten Position im Text?. 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：Wie schreibe ich einfachen Memoization-Funktionscode in JavaScript?Nächster Artikel：Wie schreibe ich einfachen Memoization-Funktionscode in JavaScript?

In Verbindung stehende Artikel

Mehr sehen