Heim > Artikel > Web-Frontend > Wie begradige ich ein Bild mit Animation mit FabricJS?
Wie begradige ich ein Bild mit Animation mit FabricJS?
- WBOYnach vorne
- 2023-09-13 21:41:06895Durchsuche
In diesem Tutorial lernen wir, wie man ein Bild mithilfe einer Animation begradigt FabricJS. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. seit Es ist eines der Grundelemente von FabricJS und wir können es auch einfach über die Anwendung anpassen Winkel, Deckkraft und andere Eigenschaften. Um das Bild mit Animation zu begradigen, verwenden wir fxStraighten-Methode.
Grammatik
fxStraighten(callbacks: Object): fabric.Object
Parameter
callbacks – Dieser Parameter ist ein Objekt mit einer Callback-Funktion, das verwendet werden kann Ändern Sie bestimmte Eigenschaften im Zusammenhang mit der Animation.
Verwenden Sie die Glättungsmethode
BeispielSchauen wir uns ein Codebeispiel an, um zu sehen, wie ein Bildobjekt angezeigt wird, wenn die Methode
straighten verwendet wird Wird anstelle von fxstraighten verwendet. Dies wird uns helfen, den Unterschied zwischen ihnen zu erkennen. Die straighten-Methode straighten dreht das Objekt lediglich vom aktuellen Winkel auf 0, 90,180, 270 usw., je nachdem, welcher Wert näher liegt. Allerdings funktioniert fxstraighten für Genauso, aber mit Animation.
<!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 Straighten method</h2>
<p>
You can see that there is no animation but the image has been straightened
</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: 10,
left: 110,
skewX: 15,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using the straighten method
image.straighten();
</script>
</body>
</html>
Verwenden Sie die fxstraightenMethode
BeispielIn diesem Beispiel haben wir die Methode
fxstraighten verwendet, um das Bildobjekt zu begradigen und zeigt eine einfache Animation an. Das Bildobjekt hat einen 45-Grad-Winkel, Begradigen durch Zurückdrehen auf 0 Grad. Abgesehen davon ist die onChange-Funktion Sie wird bei jedem Schritt der Animation aufgerufen, und die Funktion onComplete wird nur bei aufgerufen Die Animation ist abgeschlossen, weshalb unser Bildobjekt letztendlich skaliert wird Bewegen Sie sich 1,5 Mal horizontal und um einen Wert von 130 nach links.
<!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 fxStraighten method</h2>
<p>
You can see that the image gets straightened while also displaying an animation
</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: 10,
left: 110,
skewX: 15,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using fxStraighten method
image.fxStraighten({
onChange() {
canvas.renderAll();
},
onComplete() {
image.set("left", 130);
image.set("scaleX", 1.5);
canvas.renderAll();
},
});
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie begradige ich ein Bild mit Animation mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!