开源一个基于 Fabric.js 的图片蒙版标注画布组件

最近在做图片编辑平台时，画布这块踩了不少坑，顺手把核心的画布编辑器抽成了一个开源组件。

组件基于 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 也开着，不用注册不用装，直接上传图片就能试：