fabric.js图层功能独立显隐添加删除预览实现详解

这篇文章主要为大家介绍了fabric.js图层功能独立显隐添加删除预览实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

去年经历了个虚拟人的项目，其中我参与了前端的部分，一个用electron写的编辑器，UI部分用的vue3+tsx的写法（这种组合是不是没见过？我也是第一次见，惊得我当时还发了个沸点）

我所负责的部分是让用户可以对贴图进行修改，其中就涉及到了图层功能（类似Photoshop），而我当时选用的fabric是没有图层的，因此我就得考虑如何实现图层

原理

fabric本身有提供group功能，本意是让你将画布上的一些元素组合起来，这也将成为本次图层功能的基础既以一个group代表一个图层，画布下第一层children只有图层(group)，而在group中，才是用户实际绘制的内容

效果预览

本次demo实现：

用户可手动添加/删除图层
可对每个图层进行独立显隐操作，并反馈到画布中
可对每个图层单独预览

效果图：

（别嫌我的样式丑，我已经下班了，没有UI能够PUSH我！）

下期预告

让图层能够调整图层层级
结合undo + redo + 橡皮擦

小Tips

首先fabric是需要到官方上下载的，在选择你需要的模块后再进行打包

虽然npm上也可以下载，但那不是官方的包，是有网友打包好以后上传的，其中没有包含橡皮擦模块，很可能会不符合你的需求

所以我个人建议你可以自行去官网上打包，然后传到你的私有npm库里，然后就可以通过npm来管理了

fabric自定义打包下载地址：Custom Fabric build — Fabric.js Javascript Canvas Library (fabricjs.com)

fabric的事件文档：Event inspector | Fabric.js Demos (fabricjs.com)

接下来的demo将会通过直接引入的方式来使用fabric，虽然我平时写项目都是ts，但练手demo我个人建议还是js，问就是省事

完整代码

index.html代码

  Document     {{ item.name }}

sketchpad.js代码

console.log('Sketchpad load'); class Sketchpad { /** fabric实例 */ instance = null; /** 当前所在图层的id */ currentLayer = ''; /** 画布宽度 */ width = 600; /** 画布高度 */ height = 600 /** 事件订阅 */ listeners = { /** * 图层内容变化时的回调 * @param {string} id 图层id * @param {base64} data 图层内容的base64格式 */ change: (id, data) => {} } constructor(id, listeners) { this.instance = new fabric.Canvas(id); this.width = this.instance.width; this.height = this.instance.height; this.instance.isDrawingMode = true; this.listeners.change = listeners.change this.instance.on('object:added', ((options) => { if (options.target.type === 'group') return; const groups = this.instance.getObjects() groups.forEach(v => { if (v.layerId === this.currentLayer  && v.type === 'group') { v.addWithUpdate(options.target); this.instance.remove(options.target); this.listeners.change(v.layerId, v.toDataURL({ width: this.width, height: this.height })) } }) })) console.log('Sketchpad init') } /** 添加图层 */ addLayer(id) { const group = new fabric.Group([], { width: this.width, height: this.width, }); // 在这里增加一个自定义属性 layerId ，用于区分图层 group.layerId = id this.instance.add(group) this.currentLayer = id; this.listeners.change(id, group.toDataURL({ width: this.width, height: this.height })) } /** 改变图层的显示/隐藏 */ changeLayerVisible(id) { const groups = this.instance.getObjects() groups.forEach(v => { if (v.layerId === id && v.type === 'group') { v.visible = !v.visible; this.instance.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值 } }) } /** 选择要操作的图层 */ changeCurrentLayer(id) { this.currentLayer = id } /** 删除图层 */ deleteLayer(id) { const groups = this.instance.getObjects() groups.forEach(v => { if (v.layerId === id && v.type === 'group') { this.instance.remove(v) this.instance.renderAll() // 刷新画布 } }) } /** 获取画布数据，以img标签可以识别的base64格式 */ getImage() { return this.instance.toDataURL() } }

将以上这两个文件代码直接复制粘贴到编辑器里，然后再去打包个fabric.js也放进编辑器里，就可以运行啦

以上就是fabric.js图层功能独立显隐添加删除预览实现详解的详细内容，更多关于fabric.js图层功能实现的资料请关注0133技术站其它相关文章！

以上就是fabric.js图层功能独立显隐添加删除预览实现详解的详细内容，更多请关注0133技术站其它相关文章！