共计 2026 个字符,预计需要花费 6 分钟才能阅读完成。
本文简介
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
,删除元素的过渡时长就是你设置的时长。
示例代码
<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>
代码仓库
- 原生形式实现 删除元素(带过渡动画)
- 在 Vue3 中应用 Fabric 实现 删除元素(带过渡动画)
举荐浏览
⭐《Fabric.js 将本地图像上传到画布背景》
⭐《Fabric.js 从入门到收缩》
《Fabric.js 突变成果(包含径向突变)》
《Fabric.js 3 个 api 设置画布宽高》
⭐《Fabric.js 自定义右键菜单》
《Fabric.js 更换图片的 3 种办法(包含更换分组内的图片,以及存在缓存的状况)》
如果本文内容对你有所帮忙,也请你帮我点个赞呗 👍
点赞 + 关注 + 珍藏 = 学会了