Bagaimana untuk membatalkan animasi berjalan dalam Line menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membatalkan animasi berjalan dalam Line menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-07 17:05:02

ke hadapan

874 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

< 时 Line 对象的动画如何工作不使用 /i>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>  <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>
Salin selepas log masuk
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!