最近在做图片编辑平台时，画布这块踩了不少坑，顺手把核心的画布编辑器抽成了一个开源组件。
组件基于 Fabric.js 6 封装，React 18 + TypeScript 5.7 ，Tailwind CSS 。核心就是解决几个「看着简单、做起来烦」的问题：
技术实现
画笔 / 橡皮擦 — 画笔用 Fabric 自带的 PencilBrush 画半透明蒙版；橡皮擦是自己实现的 EraserBrush 子类，用 destination-out 混合模式做非破坏性擦除——只擦掉蒙版数据，不动底下的原图。
撤销 / 重做 — 每次笔画结束后把画布状态压进历史栈。在可缩放、可平移的画布上做撤销，难点在于坐标变换，稍不注意栈就乱了。
缩放 / 平移 — 以视口为中心平滑缩放，做了下限防止画布消失。抓手工具拖拽时蒙版路径要实时同步，这块坐标变换比较绕。
导出 PNG — 一键把原图 + 所有蒙版路径合成导出成带时间戳的 PNG 。
画笔尺寸 — 1~100px 滑块，带实时 SVG 光标，笔画粗细所见即所得，不靠猜。
响应式 — 用 ResizeObserver 自适应容器尺寸，支持 React children 自定义侧边栏，通过 ref 暴露 reset() / setImage() / hasMask() / exportCanvasAsImage() 等命令式 API 。
已在生产环境验证
这个组件已经在 pxdmd.com 上跑生产了——大图、频繁切换工具、极端缩放、移动端触摸这些边界情况都磨过一遍。在线 demo 也开着，不用注册不用装，直接上传图片就能试：
代码开源在 GitHub （ Apache 2.0 ）：github.com/thehouseholdofshz/fabric-canvas-editor
Select Language