本文简介
Fabric.js 提供了2个方法删除对象。
一个是 直接删除，另一个方法是 带过渡动画 删除元素（淡出动画）。
本文重点讲 带过渡动画 删除元素的方法，还会讲到设置 过渡时长 、删除后的 回调函数 等知识点。
01.gif
相关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 ，删除元素的过渡时长就是你设置的时长。
示例代码
01.gif
<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>
代码仓库
推荐阅读
《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》
如果本文内容对你有所帮助，也请你帮我点个赞呗 👍
网友评论