Bagaimana untuk meluruskan imej dengan animasi menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk meluruskan imej dengan animasi menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-13 21:41:06

ke hadapan

983 orang telah melayarinya

如何使用 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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!