FabricJS – Wie skaliert man ein Bild gleichmäßig horizontal und vertikal?-js-Tutorial-php.cn

FabricJS – Wie skaliert man ein Bild gleichmäßig horizontal und vertikal?

WBOY

Freigeben： 2023-09-06 21:29:07

nach vorne

1014 Leute haben es durchsucht

FabricJS – 如何在水平和垂直方向上均匀缩放图像？

In diesem Tutorial lernen wir, wie man ein Bild mit FabricJS gleichmäßig horizontal und vertikal skaliert. 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 das Bild sowohl in horizontaler als auch in vertikaler Richtung gleichmäßig zu skalieren, verwenden wir die scale-Methode.

Grammatik

scale(value: Number): fabric.Object

Nach dem Login kopieren

Parameter

scale – Dieser Parameter akzeptiert eine Number, die zum Festlegen des Skalierungsfaktors des Bildobjekts verwendet wird.

Standarddarstellung des Bildobjekts

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie unser Bildobjekt aussieht, ohne die Skalierungsmethode zu verwenden. In diesem Fall wird unser Bildobjekt nicht horizontal und 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>

Nach dem Login kopieren

Übergeben Sie einen benutzerdefinierten Wert mit der Methode scale

Beispiel

In diesem Beispiel sehen wir nun, dass der Scale-Methode ein Wert zugewiesen wird, der unser Bildobjekt gleichermaßen horizontal und vertikal skaliert. Da wir den Wert als 2 übergeben haben, ist dies der jetzt zu berücksichtigende Skalierungsfaktor.

<!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 scale method with a custom value</h2>
   <p>
      You can see that the object has been scaled in horizontal and 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,
      });
      
      // Using the scale method
      image.scale(2);
      
      // Add it to the canvas 
      canvas.add(image);
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie skaliert man ein Bild gleichmäßig horizontal und vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!