Fabric.js 删除元素(带过渡动画)
本文简介
Fabric.js
提供了2个方法删除对象。
一个是 直接删除,另一个方法是 带过渡动画 删除元素(淡出动画)。
本文重点讲 带过渡动画 删除元素的方法,还会讲到设置 过渡时长 、删除后的 回调函数 等知识点。
![](/assets/blank.gif)
相关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
,删除元素的过渡时长就是你设置的时长。
示例代码
![](/assets/blank.gif)
<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 = nulllet circle = nulllet rect = nullwindow.onload = function() {// 使用 元素id 创建画布,此时可以在画布上框选canvas = new fabric.Canvas('canvasBox', {width: 400,height: 400})// 圆形circle = new fabric.Circle({name: 'circle',top: 60,left: 60,radius: 30, // 圆的半径 30fill: 'yellowgreen'})// 矩形rect = new fabric.Rect({name: 'rect',top: 60, // 距离容器顶部 60pxleft: 200, // 距离容器左侧 200pxfill: 'orange', // 填充a 橙色width: 60, // 宽度 60pxheight: 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种方法(包括更换分组内的图片,以及存在缓存的情况)》
如果本文内容对你有所帮助,也请你帮我点个赞呗
目录 最终效果 一.无过渡动画的手风琴 二.有过渡动画的手风琴 1. 不能再用v-if或v-show 2. 用:class动态绑定样式 3. 子元素也要设置transition 最终效果 UI同学让做 ... 1.properties文件位置的关系:当properties文件放在src目录下时,编译会自动把src里的文件放到bin文件平级,因此可用this.getClass.getClassLoader.g ... 问题:删除ul标签下的li 第一种:ul.innerHtml = ""; 这只会删除标签,不会删除便签下的事件. 第二种: for(var i = 0;len = ul.chld ... theme: smartblue 本文简介 点赞 + 关注 + 收藏 = 学会了 本文介绍 Fabric.js 的橡皮擦功能. Fabric.js 的基础包并没有包含橡皮擦模块,如果你的项目需要使用橡 ... vue中过渡动画分为两类,一类是进场动画,一类是出场动画 要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数 类名 本质就是动态添加类名实现动画 在进入/离开的过渡中,会有 6 个 c ... 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate. ... Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 请注意它的应用场景 并不是说我们写了一个动画之后让它一直在动,而是在一个模块显示或隐藏的时候去做一种特效,使得它的过程有过渡 ... 一.认识动画 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方 ... 如何给Vue控制的元素添加过渡动画 vue-transitions 1.1 将需要执行动画的元素放到transition组件中 1.2 当transition组件中的元素显示时会自动查找.v-ente ...Fabric.js 删除元素(带过渡动画)相关推荐
最新文章
热门文章