Fabric.js 删除元素（带过渡动画）

canvas.remove(object)

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

canvas.FX_DURATION = 1500

<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>