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

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 vonfabric.Imageerstellen. 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 diescale-Methode.

Grammatik

scale(value: Number): fabric.Object

Parameter

• scale– Dieser Parameter akzeptiert eineNumber, 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.

     
  
Default appearance of the Image object
 
 You can see that the object has not been scaled in horizontal or vertical direction 
     

Übergeben Sie einen benutzerdefinierten Wert mit der Methodescale

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.

     
  
Passing the scale method with a custom value
 
 You can see that the object has been scaled in horizontal and vertical direction 
     

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!