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

德育处主任

发布于 2022-04-17 12:19:33

2.7K00

代码可运行

文章被收录于专栏：前端数据可视化前端数据可视化

运行总次数：0

代码可运行

本文简介

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>

代码仓库

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/01/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网站

登录后参与评论

0 条评论

热度