Heim >Web-Frontend >js-Tutorial >Wie finde ich den Objektskalierungsfaktor eines Bildes mit FabricJS?

Wie finde ich den Objektskalierungsfaktor eines Bildes mit FabricJS?

PHPznach vorne: 2023-08-23 20:49:031019Durchsuche

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Objektskalenfaktor eines Bildes ermitteln. Wir können ein Bildobjekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um den Objektskalierungsfaktor eines Bildes zu ermitteln, verwenden wir die Methode getTotalObjectScaling.

Grammatik

getTotalObjectScaling(): Object

Verwenden Sie die Methode getTotalObjectScaling Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

In diesem Beispiel verwenden wir die Methode

getTotalObjectScaling, um den Objektskalierungsfaktor des Bildes zu ermitteln. In diesem Fall beträgt die aufgezeichnete Ausgabe ungefähr 1,5 für „scaleX“ bzw. „scaleY“.

<!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 getTotalObjectScaling method</h2>
   <p>
      You can open the console from dev tools to see that the logged output
      contains the object scale factor
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie finde ich den Objektskalierungsfaktor eines Bildes mit FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 15,
      });
      // Add it to the canvas
      canvas.add(image);
      // Using the getTotalObjectScaling method
      console.log(
         "The scale factor of the Image object is: ",
         image.getTotalObjectScaling()
      );
   </script>
</body>
</html>

Verwenden Sie die Methode „getTotalObjectScaling“ und die Eigenschaft „scaleX“. Die chinesische Übersetzung von

Beispiel lautet: Beispiel

Sehen wir uns ein Codebeispiel an, das zeigt, wie die Protokollausgabe aussieht, wenn die Methode „getTotalObjectScaling“ mit der Eigenschaft „scaleX“ verwendet wird. Hier setzen wir den Wert des Attributs

scaleX

auf 2. Die Protokollausgabe zeigt also, dass der Wert von „scaleX“ etwa 3 beträgt, während der Wert von „scaleY“ gleich 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 getTotalObjectScaling method along with scaleX property</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the object scale factor
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie finde ich den Objektskalierungsfaktor eines Bildes mit FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 15,
         scaleX: 2, 
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getTotalObjectScaling method
      console.log(
         "The scale factor of the Image object is: ",
         image.getTotalObjectScaling()
      );
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie finde ich den Objektskalierungsfaktor eines Bildes 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 teste ich einen Wert x anhand einer Prädikatfunktion in JavaScript und gebe fn(x) oder x zurück?Nächster Artikel：Wie teste ich einen Wert x anhand einer Prädikatfunktion in JavaScript und gebe fn(x) oder x zurück?

In Verbindung stehende Artikel

Mehr sehen