Wie erhalte ich den Objektskalierungsfaktor von Text mit FabricJS?-js-Tutorial-php.cn

Wie erhalte ich den Objektskalierungsfaktor von Text mit FabricJS?

PHPz

Freigeben： 2023-08-27 23:13:08

nach vorne

1005 Leute haben es durchsucht

Wie erhalte ich den Objektskalierungsfaktor von Text mit FabricJS?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Objektskalierungsfaktor 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. Wir können den Objektskalierungsfaktor auch mit der Methode getObjectScaling ermitteln.

Grammatik

getObjectScaling()

Nach dem Login kopieren

Beispiel 1

Verwenden Sie die getObjectscaling-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der getObjectScaling-Methode zu sehen. In diesem Fall werden in der Konsole die Standardwerte für ScaleX und ScaleY von 1 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 getObjectScaling method</h2>
   <p>You can open console from dev tools and see that the logged 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 getObjectScaling method
      console.log("The scale factor is", text.getObjectScaling());
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

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

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die Methode getObjectScaling in Verbindung mit der Eigenschaft scaleX verwendet wird. In diesem Fall scheint der ScaleX-Wert des Textobjekts 2 zu sein, während der ScaleY-Wert unverändert bleibt.

<!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 getObjectScaling method and passing the scaleX property</h2>
   <p>You can open console from dev tools and see that the logged 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",
         scaleX: 2,
      });

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

      // Using getObjectScaling method
      console.log("The scale factor is", text.getObjectScaling());
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Objektskalierungsfaktor von Text mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!