Heim > Artikel > Web-Frontend > So ermitteln Sie die skalierte Textbreite mit FabricJS

So ermitteln Sie die skalierte Textbreite mit FabricJS

PHPznach vorne: 2023-08-25 09:13:02735Durchsuche

如何使用 FabricJS 获取文本的缩放宽度

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die skalierte Breite 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 Textabmessungen, sondern bietet auch zusätzliche Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight verfügbar sind. Mit der Methode getScaledWidth können wir auch die skalierte Breite eines Objekts ermitteln.

Grammatik

getScaledWidth()

Beispiel 1

Verwenden Sie die getScaledWidth-Methode

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

Beispiel 2

Verwenden Sie die getScaledWidth-Methode und übergeben Sie die ScaleX-Eigenschaft

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die Methode getScaledWidth in Verbindung mit der Eigenschaft scaleY verwendet wird. In diesem Fall wird die endgültige skalierte Breite 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 getScaledWidth method and passing the scaleX property</h2>
   <p>You can open console from dev tools and see that the width 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",
         scaleX: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);

      // Using getScaledWidth method
      console.log("The scaled width is", text.getScaledWidth());
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die skalierte Textbreite 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 begradige ich IText-Objekte mit FabricJS?Nächster Artikel：Wie begradige ich IText-Objekte mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen