当前位置:网站首页>删除元素(带过渡动画)
删除元素(带过渡动画)
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>
如果本文内容对你有所帮助,也请你帮我点个赞呗 点赞 + 关注 + 收藏 = 学会了
边栏推荐
- P1908 逆序对
- MySQL 45 lecture - learning the actual battle of MySQL in Geek time 45 Lecture Notes - 05 | easy to understand index (Part 2)
- 没有从远程服务器‘‘映射到本地用户‘(null)/sa‘的远程用户‘sa‘及服务主密码解密错误的解决办法
- docker mysql
- How kaggle uses utility script
- P1347 sorting (topology + SPFA judgment ring or topology [inner judgment ring])
- Code implementation MNLM
- Selenium installing selenium in pycharm
- 每日学习2
- Solving the longest subsequence with linear DP -- three questions
猜你喜欢
Whole house Wi Fi: a pain point that no one can solve?
Packet capturing tool Fiddler learning
Getting started with QT - making a simple calculator
Codeforces Round #803 (Div. 2)(A~D)
Use bloc to build a page instance of shutter
《可供方案开发》口算训练机/数学宝/儿童口算宝/智能数学宝 LCD液晶显示驱动IC-VK1622(LQFP64封装),原厂技术支持
浏览器驱动的下载
腾讯云 TStor 统一存储通过信通院首批文件存储基础能力评测
Borui data integrated intelligent observable platform was selected into the "Yunyuan production catalogue" of China Academy of communications in 2022
PyQt5_QScrollArea内容保存成图片
随机推荐
Yolov3 & yolov5 output result description
Pycharm连接远程服务器
Certik released the defi security report in 2021, disclosing key data of industry development (PDF download link attached)
快解析:轻松实现共享上网
每天坚持20分钟go的基础二
数据湖(十一):Iceberg表数据组织与查询
P1347 sorting (topology + SPFA judgment ring or topology [inner judgment ring])
Codeforces Round #803 (Div. 2)(A~D)
软件测试的方法
MySQL45讲——学习极客时间MySQL实战45讲笔记—— 04 | 深入浅出索引(上)
P1908 reverse sequence pair
PHP linked list creation and traversal
[to be continued] [UE4 notes] l5ue4 model import
P1908 逆序对
Generally speaking, if the error of inconsistent tab and space occurs frequently
2022 home projector preferred! Dangbei F5 brings the ultimate audio-visual experience with its powerful audio-visual effect
MySQL 45 lecture - learning from the actual battle of geek time MySQL 45 Lecture Notes - 04 | easy to understand index (Part 1)
Qt新建项目
Using computed in uni app solves the abnormal display of data () value in tab switching
freemarker的使用