Fabric.js 清空画布,甚至连画布元素也把你干掉
theme: smartblue
本文简介
点赞 关注 收藏 = 学会了
我们可以在 Canvas
上绘制图形,同样也可以将画布上的所有内容都清空掉。
本文主要聊聊:
- 在
fabric.js
中如何清空画布; - 和原生
canvas
对比,fabric.js
到底有多方便; - 销毁
fabrci.js
创建的画布; - 把
canvas
元素也销毁掉;
原生 Canvas 清空画布
某些项目中(比如绘图工具)清空画布是一个基础功能。
在原生 Canvas
中要清空画布,需要使用获取画布的宽高。
```html
```
上面的代码可以把清空画布,但如果没有了解过 canvas
,或者不熟悉的工友,看到上面的代码可能会有点懵。
但没关系,本文不是讲原生 canvas
的,如果想入门 canvas
可以移步到 《Canvas 从入门到劝朋友放弃(图解版)》
fabric.js清空画布:clear
fabric.js
提供了 clear
方法,可以直接清空画布。
为了演示这个方法,我在画布上创建了一个三角形。
```html
fabric.js
的代码就非常语义化了。就算你没了解过 fabric.js
也应该能猜出个大概。
上面的例子中,当点击按钮时就调用 canvas.clear()
直接清空了画布。在这个过程中你根本不需要了解画布的宽高。
使用 clear
方法只会清空画布上的内容,并不会销毁画布。
可以看到清空画布后,fabric.js
的默认操作还是在的(可以框选),这证明画布只是被清空了,并没有被销毁。
销毁 fabric 实例:dispose
除了使用 clear
方法清空画布外,fabric.js
还提供了另一个更强的方法:dispose
dispose
方法可以把 fabric.js
创建出来的实例销毁掉。
通常在页面销毁前会用到 dispose
方法。
尤其是在单页面应用中,离开页面前要调用该方法,不然重新进入这个页面,有可能会重新实例化画布。
如果离开页面前没销毁画布,在某些特殊情况下可能会出现意外效果。
```html
```
从上面的例子中可以看到,在销毁画布的时候,canvas
元素也获得了自由(没被 fabric.js
劫持了)。
可以对比一下
上图是 dispose
前。
上图是使用 dispose
销毁画布之后。
将 Canvas 元素也干掉:借助 getElement
如果想在销毁画布后,将 canvas
元素也移除掉,可以借助 getElement
获取当前画布元素,然后使用 dispose
销毁 fabric
创建出来的实例,再用 remove
方法把画布干掉就行。
```html
```
删除完,页面上也不会出现刚才的 canvas
元素了
代码仓库
推荐阅读
点赞 关注 收藏 = 学会了
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghcgcg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13