cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk meluruskan imej dengan animasi menggunakan FabricJS?

Bagaimana untuk meluruskan imej dengan animasi menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-13 21:41:061006semak imbas

如何使用 FabricJS 拉直带有动画的图像？

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!

回调函数 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk memadam item senarai tambahan menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk memadam item senarai tambahan menggunakan JavaScript?

Artikel berkaitan

Lihat lagi