最近在做图片编辑平台时，画布这块踩了不少坑，顺手把核心的画布编辑器抽成了一个开源组件。 组件基于 Fabric.js 6 封装，React 18 + TypeScript 5.7 ，Tailwind CSS 。核心就是解决几个「看着简单、做起来烦」的问题： 技术实现 画笔 / 橡皮擦 — 画笔用 Fabric 自带的 PencilBrush 画半透明蒙版；橡皮擦是自己实现的 EraserBrush 子类，用 destination-out 混合模式做 非破坏性擦除 ——只擦掉蒙版数据，不动底下的原图。 撤销 / 重做 — 每次笔画结束后把画布状态压进历史栈。在可缩放、可平移的画布上做撤销，难点在于坐标变换，稍不注意栈就乱了。 缩放 / 平移 — 以视口为中心平滑缩放，做了下限防止画布消失。抓手工具拖拽时蒙版路径要实时同步，这块坐标变换比较绕。 导出 PNG — 一键把原图 + 所有蒙版路径合成导出成带时间戳的 PNG 。 画笔尺寸 — 1~100px 滑块，带实时 SVG 光标，笔画粗细所见即所得，不靠猜。 响应式 ...