删除元素（带过渡动画）删除元素（带过渡动画）

本文简介 Fabric.js 提供了2个方法删除对象。
一个是直接删除，另一个方法是带过渡动画删除元素（淡出动画）。
本文重点讲带过渡动画删除元素的方法，还会讲到设置过渡时长、删除后的回调函数等知识点。

文章图片

相关API 删除元素的2种方法：

canvas.remove(...object)
canvas.fxRemove(object, callbacksopt)

设置动画时长：

canvas.FX_DURATION

canvas.remove
remove 很好理解，就是删除的意思。里面传入元素对象即可。

canvas.remove(object)

在 canvas.renderOnAddRemove 为 true 的情况下，使用 canvas.remove 删除元素后，画布会自动刷新。
canvas.renderOnAddRemove 默认值是 true

如果 canvas.renderOnAddRemove = false ，使用 canvas.remove 后，元素是删除了，但画布上还能看到元素。
此时需要手动执行 canvas.renderAll() 或者其他刷新方法，刚刚被删的元素才会从画布上(视觉上)消失。

canvas.fxRemove
fxRemove 是一个带过渡动画的删除方法，使用该方法删除的对象会淡出，直至消失。
这个方法第一个参数是要删除的对象；
第二个参数是回调对象，这个对象里有2个值，是类型函数。
分别是 onChange 和 onComplete 。

onChange ：在动画的每一步调用
onComplete：删除成功后调用

canvas.fxRemove(object, { onChange() { console.log('在动画的每一帧调用') }, onComplete() { console.log('删除成功后调用') } })

canvas.FX_DURATION
canvas.FX_DURATION 可以设置过渡动画的时长。
默认值是 500，单位是毫秒

canvas.FX_DURATION = 1500

修改后 canvas.FX_DURATION 后，再试试 canvas.fxRemove ，删除元素的过渡时长就是你设置的时长。

示例代码

代码仓库

原生方式实现删除元素（带过渡动画）
在Vue3中使用Fabric实现删除元素（带过渡动画）

推荐阅读 ?《Fabric.js 将本地图像上传到画布背景》
?《Fabric.js 从入门到膨胀》
《Fabric.js 渐变效果（包括径向渐变）》
《Fabric.js 3个api设置画布宽高》
?《Fabric.js 自定义右键菜单》
《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》

【删除元素（带过渡动画）】如果本文内容对你有所帮助，也请你帮我点个赞呗
点赞 + 关注 + 收藏 = 学会了