Rumah > Artikel > hujung hadapan web > Bagaimana untuk membatalkan animasi berjalan dalam Line menggunakan FabricJS?

Bagaimana untuk membatalkan animasi berjalan dalam Line menggunakan FabricJS?

PHPzke hadapan: 2023-09-07 17:05:02850semak imbas

如何使用 FabricJS 取消 Line 中的运行动画？

Dalam tutorial ini, kita akan belajar cara membatalkan animasi berjalan dalam Line menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garis dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk membatalkan animasi yang sedang berjalan, kami menggunakan kaedah buang.

Tatabahasa

 dispose()

Tidak digunakan buang Kaedah

Contoh🎜🎜#Contoh🎜🎜#Contoh🎜 contoh kod untuk difahami apabila kaedah

buang

. Di sini kami mencipta animasi ringkas di mana objek garis melengkapkan putaran penuh dan mengembang lebar.

<!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>Without using dispose method</h2>
   <p>You can see the animation is happening properly</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([250, 100, 310, 100], {
         stroke: "blue",
         strokeWidth: 10,
      });
      
      // Using the animate method
      line.animate("angle", "+=360", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 1700,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Gunakan

buang

kaedah Contoh

Dalam contoh ini, kami menggunakan kaedah

buang

untuk membatalkan animasi yang sedang berjalan. semua Oleh itu, animasi berjalan bagi contoh baris akan dibatalkan.

<!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 dispose method</h2>
   <p>You can see that the animation no longer happens</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([250, 100, 310, 100], {
         stroke: "blue",
         strokeWidth: 10,
      });
      
      // Using the animate method
      line.animate("angle", "+=360", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 1700,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using dispose method
      line.dispose()
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk membatalkan animasi berjalan dalam Line 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：Bina aplikasi tanpa pelayan menggunakan JavaScript dan AWS LambdaArtikel seterusnya：Bina aplikasi tanpa pelayan menggunakan JavaScript dan AWS Lambda

Artikel berkaitan

Lihat lagi