【开源故事】从“零图形背景”到“海报编辑器上线”：与 LeaferJS 相爱相杀的日子
2026-03-20 作者 Ranbow
前言
大家好，我是Ranbow！
去年团队上线了一款在线设计工具 《图鲸灵》，主要功能是海报编辑、批量图片处理、以及AI生成图片，感兴趣的小伙伴可以体验一下 ~
图形编辑核心选择了 LeaferJS，项目期间做了很多小工具，一起分享给大家。助力大家快速完成项目开发。如果你对细节感兴趣，请听我娓娓道来。
1. 缘起：为什么选它？
背景：
- 原本ERP系统中有一个专用的图片处理功能，是纯dom写的，元素多卡顿只是痛点之一，最头疼的其实是导出图片性能慢，导出图片截图效果不好
- 接到“海报编辑器”需求，根据以往经验，必须得上Canvas了，但我无图形学背景，面对 Canvas/SVG/WebGL 一脸懵。
选型纠结：对比 Fabric.js, Konva, PixiJS 等，最终为何锁定 LeaferJS？
- 爱点：文档友好、性能惊艳（百万级渲染）、国产之光的情怀加分。
- 期待：以为选了它就能 “躺赢”，快速上线。
- 痛点：上手第一周，被坐标 “local、world、page” 绕晕。
2. 生态现状 & 感谢开源
早期我入局的时候，还在快速发展，官方付费高级插件体系还未建立。
- 社区插件支持
- 设计类的开源项目：果米设计 - 果子米 感谢开源！
生态的建设者 (取之于开源回馈开源)
1. Leafer 吸附线插件
在开源吸附线的基础上，结合自己产品需要进行了重新设计与加强
- 项目地址： leafer-x-easy-snap
2. Leafer 图片裁剪编辑器
这个插件主要核心点是裁剪的思路：通过一个容器包裹一个裁剪元素（图片或其他）；通过容器包裹的方式，改变子元素在容器中的位置，实现裁剪效果。
随后官方出了很好用的裁剪插件专门对 Rect等元素进行裁剪；不过我还是很喜欢我的裁剪方案，因为沿着我的裁剪思路其实我可以裁剪万物...
后续在此基础上实现了整个画板级的整体裁剪，裁剪后子元素位置更新到视觉位置，并支持后续继续移动编辑等（业务逻辑关联强，后续未开源）
3. 撤销重做
很久之前我就知道稿定Inc开源了一个状态管理库（StateShot）。我在此基础上进行了文档汉化和代码TS语法重构，原则上用谁的都一样，我的TS支持好一些。
- 项目地址： state-snapshot
基于结构共享的非侵入式历史状态管理。如需深入了解建议阅读 核心概念；利用此库，可以有效减小数据变动后存储的数据量，避免内存爆炸。
4. Leafer 特效文字插件
一个功能强大的 Leafer UI 特效文字插件，支持多层文字特效叠加，实现描边、阴影、渐变等丰富的视觉效果。
- 项目地址： leafer-x-effect-text
- PlayGround：预览体验
5. Leafer 二维码插件
Leafer UI 二维码插件, 根据文本自动生成二维码，支持中心小图标
- 项目地址：leafer-x-qrcode
- PlayGround：预览体验
6. Leafer 水印插件
Leafer UI 水印插件，支持基于父容器的平铺水印、和局部平铺水印。
- 推动官方支持了水印错位效果（原本是自己魔改实现，Leafer 2.0.0版本interlace支持）
- 项目地址：leafer-x-watermark
- PlayGround：预览体验
好玩的功能
1. 马赛克、高斯模糊功能
这个是基于画板背景的，实现起来也是很复杂, 马赛克既是个元素可编辑，又不能影响其他元素的渲染，多个马赛克衔接还要自然
思路：
- 把父容器渲染Render部分拿出来修改
- 利用 filter 滤镜先计算父容器的整体马赛克
- 再把马赛克元素所在区域抠出来独立渲染，渲染后子元素继续渲染
2. 切图下载
实现了编辑切图大小实时渲染蚂蚁线分割，实时看到切图区域，效果很棒~
3. 高性能渲染
画板编辑时底部预览图实时渲染，这个不起眼的小功能我当初头疼了很久；画板数量多的时候，又要渲染，又要保存数据(含预览图)到服务端，性能也是十分的灾难。
- 除了常规的防抖，还有一套 “快照管理服务”，便于在各种场景下获取高性能预览图。
- 还要精准找到需要重新渲染的目标画板，避免性能浪费。
作者：Ranbow
链接：https://juejin.cn/post/7618805017437847595
来源：稀土掘金