Comment annuler l'exécution d'une animation dans Line à l'aide de FabricJS ?-js tutoriel-php.cn

Comment annuler l'exécution d'une animation dans Line à l'aide de FabricJS ?

PHPz

Libérer： 2023-09-07 17:05:02

avant

898 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment annuler une animation en cours d'exécution dans une ligne à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour annuler une animation en cours, nous utilisons la méthode dispose.

Syntaxe

 dispose()

Copier après la connexion

Ne pas utiliser la méthode dispose

Exemple

Voyons un exemple de code pour comprendre quand la méthode dispose< 时 Line 对象的动画如何工作不使用 /i> est utilisée. Ici, nous créons une animation simple dans laquelle un objet ligne effectue une rotation complète et s'agrandit en largeur.

<!DOCTYPE html> <html> <head>  <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>
Copier après la connexion

Utilisez la méthode dispose

Exemple

Dans cet exemple, nous utilisons la méthode dispose pour annuler l'animation en cours. tous L'animation en cours d'exécution de l'instance de ligne sera donc annulée.

<!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>
Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Comment annuler l'exécution d'une animation dans Line à l'aide de FabricJS ?

Syntaxe

Ne pas utiliser la méthode dispose

Exemple

Utilisez la méthode dispose

Exemple