语法 dispose()
不使用 dispose 方法 示例 让我们看一个代码示例，了解当 dispose 方法。在这里，我们创建了一个简单的动画，其中线条对象完成完整旋转并扩展宽度。
<!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>
使用dispose方法示例在这个例子中，我们使用了dispose方法来取消正在运行的动画。全部线条实例的运行动画将因此被取消。
<!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>
以上就是如何使用 fabricjs 取消 line 中的运行动画？的详细内容。