Heim > Artikel > Web-Frontend > FabricJS – Wie skaliert man ein Bildobjekt auf eine bestimmte Höhe?

FabricJS – Wie skaliert man ein Bildobjekt auf eine bestimmte Höhe?

WBOYnach vorne: 2023-09-10 19:13:021357Durchsuche

FabricJS – 如何将图像对象缩放到给定高度？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Bildobjekt auf eine bestimmte Höhe skalieren. 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 ein Bildobjekt auf eine bestimmte Höhe zu skalieren, verwenden wir die Methode scaleToHeight.

Grammatik

scaleToHeight(value: Number, absolute: Boolean): fabric.Object

Parameter

value – Dieser Parameter akzeptiert eine Number, die den neuen Höhenwert des Bildobjekts bestimmt.
absolute – Dieser Parameter akzeptiert einen booleschen-Wert, der bestimmt, ob das Ansichtsfenster ignoriert wird.

Standarddarstellung des Bildobjekts

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Bildobjekt aussieht, ohne die Methode scaleToHeight zu verwenden. In diesem Fall wird unser Bildobjekt weder horizontal noch vertikal skaliert.

<!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>Default appearance of the Image object</h2>
   <p>
      You can see that the object has not been scaled in horizontal or vertical direction
   </p> 
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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);
   </script>
</body>
</html>

Übergeben Sie einen benutzerdefinierten Wert mit der Methode scaleToHeight

Beispiel

In diesem Beispiel sehen wir, wie man ein Bildobjekt auf eine bestimmte Höhe skaliert, indem man der Methode scaleToHeight einen Wert zuweist. Da wir den Wert 100 übergeben haben, ist dies die neue Höhe des Bildobjekts.

<!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>Passing the scaleToHeight method with a custom value</h2>
   <p>You can see that the new height of our image object is 100</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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,
      });
      
      // Using scaleToHeight method
      image.scaleToHeight(100, false);
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonFabricJS – Wie skaliert man ein Bildobjekt auf eine bestimmte Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

值传递 number 对象 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 berechnet man die Vereinigung von JavaScript-Arrays?Nächster Artikel：Wie berechnet man die Vereinigung von JavaScript-Arrays?

In Verbindung stehende Artikel

Mehr sehen