当前位置:网站首页>删除元素(带过渡动画)
删除元素(带过渡动画)
2022-07-02 11:08:00 【德育处主任】
本文简介
Fabric.js
提供了2个方法删除对象。
一个是 直接删除,另一个方法是 带过渡动画 删除元素(淡出动画)。
本文重点讲 带过渡动画 删除元素的方法,还会讲到设置 过渡时长 、删除后的 回调函数 等知识点。
<br>
<br>
相关API
删除元素的2种方法:
canvas.remove(...object)
canvas.fxRemove(object, callbacksopt)
设置动画时长:
canvas.FX_DURATION
<br>
canvas.remove
remove
很好理解,就是删除的意思。里面传入元素对象即可。
canvas.remove(object)
在 canvas.renderOnAddRemove
为 true
的情况下,使用 canvas.remove
删除元素后,画布会自动刷新。
canvas.renderOnAddRemove
默认值是 true
<br>
如果 canvas.renderOnAddRemove = false
,使用 canvas.remove
后,元素是删除了,但画布上还能看到元素。
此时需要手动执行 canvas.renderAll()
或者其他刷新方法,刚刚被删的元素才会从画布上(视觉上)消失。
<br>
canvas.fxRemove
fxRemove
是一个带过渡动画的删除方法,使用该方法删除的对象会淡出,直至消失。
这个方法 第一个参数 是要删除的对象;
第二个参数 是回调对象,这个对象里有2个值,是类型函数。
分别是 onChange
和 onComplete
。
onChange
:在动画的每一步调用onComplete
:删除成功后调用
<br>
canvas.fxRemove(object, { onChange() { console.log('在动画的每一帧调用') }, onComplete() { console.log('删除成功后调用') }})
<br>
canvas.FX_DURATION
canvas.FX_DURATION
可以设置过渡动画的时长。
默认值是 500,单位是 毫秒
canvas.FX_DURATION = 1500
<br>
修改后 canvas.FX_DURATION
后,再试试 canvas.fxRemove
,删除元素的过渡时长就是你设置的时长。
<br>
<br>
示例代码
<div class="btn-x"> <button onclick="delCircle()">删除元素(圆型)</button> <button onclick="delRect()">带动画删除元素(方形)</button></div><canvas id="canvasBox" width="600" height="600"></canvas> <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script><script> let canvas = null let circle = null let rect = null window.onload = function() { // 使用 元素id 创建画布,此时可以在画布上框选 canvas = new fabric.Canvas('canvasBox', { width: 400, height: 400 }) // 圆形 circle = new fabric.Circle({ name: 'circle', top: 60, left: 60, radius: 30, // 圆的半径 30 fill: 'yellowgreen' }) // 矩形 rect = new fabric.Rect({ name: 'rect', top: 60, // 距离容器顶部 60px left: 200, // 距离容器左侧 200px fill: 'orange', // 填充a 橙色 width: 60, // 宽度 60px height: 60 // 高度 60px }) // 将矩形添加到画布中 canvas.add(circle, rect) } // 删除圆形(没动画) function delCircle() { canvas.remove(circle) } // 删除矩形(有动画) function delRect() { canvas.FX_DURATION = 1500 // 设置动画时长,默认500毫秒 canvas.fxRemove(rect, { onChange() { console.log('在动画的每一步调用') }, onComplete() { console.log('删除成功后调用') } }) }</script>
<br>
<br>
代码仓库
<br>
<br>
推荐阅读
《Fabric.js 更换图片的3种方法(包括更换分组内的图片,以及存在缓存的情况)》
<br>
如果本文内容对你有所帮助,也请你帮我点个赞呗 点赞 + 关注 + 收藏 = 学会了
边栏推荐
- freemarker的使用
- Téléchargement par navigateur
- 跨服务器数据访问的创建链接服务器方法
- [to be continued] [UE4 notes] l5ue4 model import
- [development environment] Dell computer system reinstallation (download Dell OS recovery tool | use Dell OS recovery tool to make USB flash disk system | install system)
- Start to write a small demo - three piece chess
- The conference on the growth of all things was held in Hangzhou, and dangbei was selected into the top 100 list of future unicorns in China in 2022
- 测试框架TestNG的使用(二):testNG xml的使用
- 自定义事件,全局事件总线,消息订阅与发布,$nextTick
- 什么是 eRDMA?丨科普漫画图解
猜你喜欢
<口算練習機 方案開發原理圖>口算練習機/口算寶/兒童數學寶/兒童計算器 LCD液晶顯示驅動IC-VK1621B,提供技術支持
Mysql5.7 installation super easy tutorial
[deep learning] simple implementation of neural network forward propagation
Qt新建项目
Launcher启动过程
Subcontracting configuration of uniapp applet subpackages
In 2021, the global styrene butadiene styrene (SBS) revenue was about $3722.7 million, and it is expected to reach $5679.6 million in 2028
《可供方案开发》口算训练机/数学宝/儿童口算宝/智能数学宝 LCD液晶显示驱动IC-VK1622(LQFP64封装),原厂技术支持
[development environment] Dell computer system reinstallation (download Dell OS recovery tool | use Dell OS recovery tool to make USB flash disk system | install system)
selenium,元素操作以及浏览器操作方法
随机推荐
[development environment] 010 editor tool (tool download | binary file analysis template template installation | shortcut key viewing and setting)
[development environment] StarUML tool (download software | StarUML installation | StarUML creation project)
Qt如何设置固定大小
YOLOv3&YOLOv5输出结果说明
Borui data integrated intelligent observable platform was selected into the "Yunyuan production catalogue" of China Academy of communications in 2022
自定义事件,全局事件总线,消息订阅与发布,$nextTick
Chaos engineering platform chaosblade box new heavy release
MySQL 45 lecture - learning the actual battle of MySQL in Geek time 45 Lecture Notes - 05 | easy to understand index (Part 2)
Qt新建项目
2022家用投影仪首选!当贝F5强悍音画效果带来极致视听体验
Browser driven Download
Word frequency statistics & sorting
SystemServer进程
Development skills of rxjs observable custom operator
无主灯设计:如何让智能照明更加「智能」?
Start to write a small demo - three piece chess
MySQL -- convert rownum in Oracle to MySQL
Daily learning 3
Use of swagger
Design and implementation of car query system based on php+mysql