suchen

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

Wie erhalte ich den Objektskalierungsfaktor eines Bildes mit FabricJS?

WBOY
WBOYnach vorne
2023-09-20 08:37:041031Durchsuche

Wie erhalte ich den Objektskalierungsfaktor eines Bildes mit FabricJS?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Objektskalierungsfaktor eines Bildes ermitteln. Wir können ein Image-Objekt 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 erhalten, verwenden wir die Methode getObjectScaling.

Grammatik

getObjectScaling(): Object

Verwenden Sie die Methode getObjectscaling

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode

getObjectScaling 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>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie erhalte 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,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectScaling method
      console.log("The scale factor is", image.getObjectScaling());
   </script>
</body>
</html>

Verwenden Sie die Methode

getObjectScaling und übergeben Sie die Eigenschaft „scaleX“

Beispiel

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 Bildobjekts 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>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie erhalte 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,
         scaleX: 2,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectScaling method
      console.log("The scale factor is", image.getObjectScaling());
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie erhalte 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：Methode „process.cpuUsage()“ in Node.jsNächster Artikel：Methode „process.cpuUsage()“ in Node.js

In Verbindung stehende Artikel

Mehr sehen