Heim > Artikel > Web-Frontend > Wie erhalte ich mit FabricJS die skalierte Texthöhe?

Wie erhalte ich mit FabricJS die skalierte Texthöhe?

WBOYnach vorne: 2023-08-23 21:37:081310Durchsuche

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Zoomhöhe von Text ermitteln. 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 Textgröße, sondern bietet auch andere Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight abgerufen werden können. Wir können auch die Methode getScaledHeight verwenden, um die skalierte Höhe eines Objekts zu ermitteln.

Grammatik

getScaledHeight()

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

Verwenden Sie die getScaledHeight-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der getScaledHeight-Methode zu sehen. In diesem Fall wird die Höhe des Objekts 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 getScaledHeight method</h2>
   <p>You can open console from dev tools and see that the 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 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 getScaledHeight method
      console.log("The scaled height is", text.getScaledHeight());
   </script>
</body>
</html>

Beispiel 2

wird übersetzt als:

Beispiel 2

Verwenden Sie die Methode getScaledHeight und übergeben Sie die Eigenschaft scaleY

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die Methode „getScaledHeight“ in Verbindung mit der Eigenschaft „scaleY“ verwendet wird. In diesem Fall wird die endgültige skalierte Höhe 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 getScaledHeight method and passing the scaleY property</h2>
   <p>You can open console from dev tools and see that the height value is 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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         scaleY: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);
      
      // Using getScaledHeight method
      console.log("The scaled height is", text.getScaledHeight());
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit FabricJS die skalierte Texthöhe?. 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 erstelle ich private Variablen in JavaScript?Nächster Artikel：Wie erstelle ich private Variablen in JavaScript?

In Verbindung stehende Artikel

Mehr sehen