本文簡(jiǎn)介
Fabric.js 提供了2個(gè)方法刪除對(duì)象。
一個(gè)是 直接刪除糯彬，另一個(gè)方法是 帶過(guò)渡動(dòng)畫(huà) 刪除元素（淡出動(dòng)畫(huà)）纽乱。
本文重點(diǎn)講 帶過(guò)渡動(dòng)畫(huà) 刪除元素的方法，還會(huì)講到設(shè)置 過(guò)渡時(shí)長(zhǎng) 掀亥、刪除后的 回調(diào)函數(shù) 等知識(shí)點(diǎn)撞反。
相關(guān)API
刪除元素的2種方法：
canvas.remove(...object)canvas.fxRemove(object, callbacksopt)
設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)：
canvas.FX_DURATION
canvas.remove
remove 很好理解，就是刪除的意思搪花。里面?zhèn)魅朐貙?duì)象即可遏片。
canvas.remove(object)
在 canvas.renderOnAddRemove 為 true 的情況下，使用 canvas.remove 刪除元素后撮竿，畫(huà)布會(huì)自動(dòng)刷新吮便。
canvas.renderOnAddRemove 默認(rèn)值是 true
如果 canvas.renderOnAddRemove = false ，使用 canvas.remove 后幢踏，元素是刪除了髓需，但畫(huà)布上還能看到元素。
此時(shí)需要手動(dòng)執(zhí)行 canvas.renderAll() 或者其他刷新方法房蝉，剛剛被刪的元素才會(huì)從畫(huà)布上(視覺(jué)上)消失授账。
canvas.fxRemove
fxRemove 是一個(gè)帶過(guò)渡動(dòng)畫(huà)的刪除方法枯跑，使用該方法刪除的對(duì)象會(huì)淡出，直至消失白热。
這個(gè)方法 第一個(gè)參數(shù) 是要?jiǎng)h除的對(duì)象敛助；
第二個(gè)參數(shù) 是回調(diào)對(duì)象，這個(gè)對(duì)象里有2個(gè)值屋确，是類(lèi)型函數(shù)纳击。
分別是 onChange 和 onComplete 。
onChange：在動(dòng)畫(huà)的每一步調(diào)用onComplete：刪除成功后調(diào)用
canvas.fxRemove(object, {
onChange() {
console.log('在動(dòng)畫(huà)的每一幀調(diào)用')
},
onComplete() {
console.log('刪除成功后調(diào)用')
}
})
canvas.FX_DURATION
canvas.FX_DURATION 可以設(shè)置過(guò)渡動(dòng)畫(huà)的時(shí)長(zhǎng)攻臀。
默認(rèn)值是 500焕数，單位是 毫秒
canvas.FX_DURATION = 1500
修改后 canvas.FX_DURATION 后，再試試 canvas.fxRemove 刨啸，刪除元素的過(guò)渡時(shí)長(zhǎng)就是你設(shè)置的時(shí)長(zhǎng)堡赔。
示例代碼
<div class="btn-x">
<button onclick="delCircle()">刪除元素（圓型）</button>
<button onclick="delRect()">帶動(dòng)畫(huà)刪除元素（方形）</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 創(chuàng)建畫(huà)布，此時(shí)可以在畫(huà)布上框選
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, // 距離容器左側(cè) 200px
fill: 'orange', // 填充a 橙色
width: 60, // 寬度 60px
height: 60 // 高度 60px
})
// 將矩形添加到畫(huà)布中
canvas.add(circle, rect)
}
// 刪除圓形（沒(méi)動(dòng)畫(huà)）
function delCircle() {
canvas.remove(circle)
}
// 刪除矩形（有動(dòng)畫(huà)）
function delRect() {
canvas.FX_DURATION = 1500 // 設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)设联，默認(rèn)500毫秒
canvas.fxRemove(rect, {
onChange() {
console.log('在動(dòng)畫(huà)的每一步調(diào)用')
},
onComplete() {
console.log('刪除成功后調(diào)用')
}
})
}
</script>
代碼倉(cāng)庫(kù)
- 原生方式實(shí)現(xiàn) 刪除元素（帶過(guò)渡動(dòng)畫(huà)）
- 在Vue3中使用Fabric實(shí)現(xiàn) 刪除元素（帶過(guò)渡動(dòng)畫(huà)）
推薦閱讀
?《Fabric.js 將本地圖像上傳到畫(huà)布背景》
《Fabric.js 3個(gè)api設(shè)置畫(huà)布寬高》
《Fabric.js 更換圖片的3種方法（包括更換分組內(nèi)的圖片善已，以及存在緩存的情況）》
如果本文內(nèi)容對(duì)你有所幫助，也請(qǐng)你幫我點(diǎn)個(gè)贊唄 ??
