本文简介

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种办法（包含更换分组内的图片，以及存在缓存的状况）》


如果本文内容对你有所帮忙，也请你帮我点个赞呗
点赞 + 关注 + 珍藏 = 学会了