Rumah > Artikel > hujung hadapan web > Bagaimana untuk meluruskan imej dengan animasi menggunakan FabricJS?
Bagaimana untuk meluruskan imej dengan animasi menggunakan FabricJS?
- WBOYke hadapan
- 2023-09-13 21:41:06895semak imbas
Dalam tutorial ini kita akan belajar cara meluruskan imej menggunakan animasi FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. sejak Ia adalah salah satu elemen asas FabricJS dan kami juga boleh menyesuaikannya dengan mudah melalui aplikasi Sudut, kelegapan dan sifat lain. Untuk meluruskan imej dengan animasi yang kami gunakan fxStraighten kaedah.
Tatabahasa
fxStraighten(callbacks: Object): fabric.Object
Parameter
panggilan balik - Parameter ini ialah objek dengan fungsi panggil balik yang boleh digunakan Tukar sifat tertentu yang berkaitan dengan animasi.
Gunakan cara meluruskan
Contoh
Mari kita lihat contoh kod untuk melihat bagaimana objek Imej dipaparkan apabila menggunakan kaedah luruskan Digunakan bukannya fxluruskan. Ini akan membantu kita menyedari perbezaan antara mereka. Kaedah luruskan hanya luruskan memutar objek dari sudut semasa ke 0, 90,180, 270, dsb. bergantung pada mana satu lebih dekat. Walau bagaimanapun, fxluruskan berfungsi untuk Cara yang sama, tetapi dengan animasi.
<!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>
Gunakan fxstraightencara
Contoh
Dalam contoh ini kami menggunakan kaedah fxstraighten untuk meluruskan objek imej dan memaparkan animasi ringkas. Objek imej mempunyai sudut 45 darjah, Luruskan dengan memutar kembali ke 0 darjah. Selain itu, fungsi onChange ialah Ia dipanggil pada setiap langkah animasi, dan fungsi onComplete hanya dipanggil di Animasi telah lengkap, itulah sebabnya objek imej kami akhirnya menjadi skala Bergerak secara mendatar 1.5 kali dan kiri dengan nilai 130.
<!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>
Atas ialah kandungan terperinci Bagaimana untuk meluruskan imej dengan animasi menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!