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.
scaleToHeight(value: Number, absolute: Boolean): fabric.Object
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.
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>
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!