纯静态 HTML + CSS + JavaScript 实现的高性能无限画布白板。无构建、无依赖、无服务器——打开 index.html 即可使用。
在线体验：https://xiaomu18.github.io/InfiniteBoard/
- 高性能、高颜值。丝滑切换明亮和暗黑模式（玻璃拟态）。
- 7 种手绘笔刷（铅笔、记号笔、钢笔、毛笔、刷子、颜料刷、喷枪）+ 直线工具，粗细各自记忆。
- 圆形调色盘 + HEX 输入 + 3 种世界渐变（彩虹 / 星空 / 海洋）。
- 插入对象：图片、文本、SVG 矢量图都能直接放到画布上，与笔迹一样参与选择、移动、缩放、旋转、擦除、存档。
- 光标工具：不改变视角，直接拖屏幕上的单个对象；双击文本即可编辑；右键弹出完整上下文菜单。
- 等比缩放与旋转：选区四角手柄或在选区上右键横拖可等比缩放；旋转工具以目标中心为原点旋转（
Shift吸附 15°）。 - 画布无限大，支持移动工具、
Alt+ 左键拖动平移、Alt+ 右键横拖缩放。 - 三层自适应网格，无论缩到多小多大密度都舌适。
- 橡皮擦像素级抹除，大小可调；
Ctrl+ 左键临时当橡皮擦，Ctrl+ 右键横拖调大小。 - 自动保存：笔迹、对象、视口与偏好实时节流写入 localStorage，图片/SVG 资源存入 IndexedDB，下次打开自动恢复。
- .wbd 二进制存档（v3）：无损保存笔迹 + 插入对象 + 内嵌资源 + 变换与视口，CRC32 校验 + gzip 压缩，可直接拖入窗口打开（兼容 v1 / v2 旧档）。
- 导出 PNG：全图、仅选区、或右键菜单里导出单个对象。
三行五列，共 15 格（紧凑模式下变为两列）：
| 行 | 内容 |
|---|---|
| 1 | 光标 · 旋转 · 铅笔 · 记号笔 · 钢笔 |
| 2 | 毛笔 · 刷子 · 颜料刷 · 喷枪 · 直线 |
| 3 | 矩形选择 · 自由选择 · 移动视角 · 橡皮擦 · 插入（＋） |
| 快捷键 | 笔刷 | 特征 |
|---|---|---|
| 1 | 铅笔 | 石墨颅粒、纸纹磨损感 |
| 2 | 记号笔 | 扁头、均匀半透、叠写变深 |
| 3 | 钢笔 | 丰盈、边缘锐利 |
| 4 | 毛笔 | 提按改变笔锋、起收笔开叉 |
| 5 | 刷子 | 多束硬毛、干刷拖痕 |
| 6 | 颜料刷 | 堆叠质感、厚色边缘 |
| 7 | 喷枪 | 软边缘喷雾、叠加渐浓 |
老版本的“水彩笔刷”与“蜡笔”已移除；旧存档里这两种笔迹在打开时会自动回退为钢笔。
笔触宽度由压感 + 运笔速度共同模拟，每种笔刷各自记忆粗细。
笔直、实心、粗细均匀，两端半圆收口；拖动中按 Shift 吸附到 15° 的整数倍；它单独记忆自己的粗细。
工具栏最后一格的“＋”，点击弹出三项子菜单：
- 添加图片：PNG / JPEG / WebP / GIF（静帧）。
- 添加文本：新建后直接进入编辑，颜色默认跟随调色盘。
- 添加 SVG 矢量图：按当前缩放清晰光光栅格化，缩放后会重新清晰。
也可以直接把图片 / SVG 文件拖入窗口，或用 Ctrl+V 从系统剪贴板粘贴图片与文本。
插入的对象会自动保存（资源存 IndexedDB），并无损写入 .wbd 存档。
- 双击（光标工具）或右键菜单的“编辑文本”进入编辑，文本旁会浮现样式控件条：字体、字号、加粗 / 斜体 / 下划线、对齐、行高。
- 只选中部分字符时，样式与颜色只作用于那一段。
- 编辑中操作调色盘可改颜色；三种渐变色同样可用于文本。
- 自动宽度，只按手动换行排版。
- 左键拖动：一次只拖一个对象，且只拖命中点上最上层的那一个（不会把整个选区带走）。
- 双击文本：直接编辑。
- 右键菜单（对象上）：编辑文本 · 复制 · 剪切 · 创建副本 · 置顶 · 置底 · 水平/垂直翻转 · 重置变换 · 导出 PNG · 锁定 · 删除。
- 右键菜单（空白处）：粘贴 · 清空画布。粘贴同时支持系统剪贴板的文本/图像与白板内部复制的对象。
- SVG 对象额外提供透明背景：先解析 SVG 去掉背景层，解析不行再像素抠白/黑底。
- 矩形选择（V）与自由套索选择（B），笔迹与插入对象都能选中。
- 选中后在选区内拖动即可移动；拖四角手柄或在选区上右键横拖即可等比缩放。
- 旋转工具（R）：左键选中目标，再右键拖动绕目标中心旋转，
Shift吸附 15°。 Delete/Backspace删除选中，Esc取消。- 渐变色在旋转缩放后保持世界坐标映射，多个对象的渐变会自然衔接。
- .wbd v3：笔迹、图片/SVG/文本对象、内嵌资源字节、变换（位置/旋转/缩放/翻转）、锁定、擦除遮罩与视口全部无损保存；兼容读取 v1 / v2 旧档。
- 导出 PNG：全图按内容边界裁切、仅选区、或右键导出单个对象。
- 自动保存 v2：场景与视口存 localStorage，图片/SVG 资源存 IndexedDB（
wb-assets），两者按 assetId 关联。
- 中文界面，深色 / 浅色主题一键切换；面板可自动折叠，鼠标移到最左侧弹出。
- UI 缩放随窗口自适应，窗口较小时自动切入紧凑模式（工具栏变两列）。
| 操作 | 快捷键 |
|---|---|
| 切换笔刷 | 1 – 7 |
| 光标 / 旋转 / 直线 / 插入 | A / R / L / I |
| 橡皮擦 / 矩形选择 / 自由选择 / 移动视角 | E / V / B / H |
| 复制 / 剪切 / 粘贴 / 副本 | Ctrl+C / Ctrl+X / Ctrl+V / Ctrl+D |
| 临时切到橡皮擦 | 按住 Ctrl + 左键（松开即恢复） |
| 调橡皮擦大小 | Ctrl + 右键左右拖动 |
| 等比缩放选区 | 拖四角手柄，或选区上右键左右拖动 |
| 旋转对象 | R 后左键选中、右键拖动（Shift 吸附 15°） |
| 平移视角 | Alt + 左键拖动，或按住空格拖动 |
| 缩小 / 放大视角 | Alt + 右键左右拖动，或滚轮 |
| 缩放归位 100% | 0 |
| 逐级缩放 | + / - |
| 调笔刷粗细 | [ / ] |
| 撤销（无重做） | Z 或 Ctrl+Z |
| 删除选中 | Delete / Backspace |
| 取消选区 / 关菜单 | Esc |
| 网格 / 主题 / 折叠面板 | G / T / F |
index.html
styles/
base.css 主题变量、画布层、HUD、提示条
panel.css 左侧面板布局与折叠动画
widgets.css 滑块、色轮、色卡、按钮等控件
menu.css 插入菜单、右键菜单、文本样式条
src/
utils/math.js 插值、重采样、简化、包围盒、色带（ribbon）填充、确定性随机
utils/color.js HEX/HSV 转换、世界坐标渐变
core/Xform.js 对象变换（位置/旋转/缩放/翻转）与矩阵
core/Viewport.js 世界↔屏幕变换
core/Scene.js 对象集合、剪裁、命中测试、层序
core/History.js 撤销栈
core/OverscanBuffer.js 超采样缓冲（性能核心）
core/Renderer.js 四层画布调度
core/InputRouter.js 指针/滚轮/键盘分发
objects/ 资源缓存、图片、SVG、文本排版与渲染
brushes/ 7 种笔刷 + 直线 + 公共笔刷底层 + 注册表
tools/ 绘制、直线、橡皮擦、平移、缩放、选择、光标、旋转、插入、变换会话
ui/ 面板、色轮、提示、网格、插入菜单、右键菜单、文本编辑器
io/ idb 资源库、.wbd 存档、PNG 导出、自动保存
main.js 装配与全局状态
- 四层画布分工：网格 / 已定稿内容 / 当前一笔或拖动预览 / 交互浮层。
- 超采样缓冲 + GPU 变换：平移缩放过程中只给 canvas 打 CSS
transform，手势结束才重烘一次。 - 增量描绘：不透明类笔刷每帧只画新增那一小段，避开长笔画的 O(n²)。
- 笔触宽度在输入时算一次并随点存储，无论重绘多少次都完全一致。
- 对象变换只存一个
tf（位置/旋转/缩放/翻转），渲染时才展开成矩阵，因此旋转缩放任意次也不会累积误差、不会损失精度。 - SVG 按缩放重新栅格化（带缓存），因此放大后仍然锐利。
- 包围盒剪裁 + 单一 rAF 脏标记循环：没有变化就一个像素也不画。
- 指针事件合并采样（
getCoalescedEvents）：高刷新率设备上不丢点。
- 擦除是“叠在上面的遮罩”，不是重写几何。好处是撤销精确、存档无损、无限缩放不像素化；代价是大量擦除后重烘需要按序合成。
- 选区移动/缩放的是整个对象，不是像素块。只要笔迹有任何一个点落在选区内，整条就会跟着走；好处是结果仍是矢量。
- 擦除痕迹随对象一起变换。变换提交时，压在目标上的擦除会按“变换前”的位置固化成对象自带的本地遮罩（类似图层蒙版），因此移动/旋转/缩放后缺口位置完全正确。代价：这样的对象提交时会被置顶（否则原处的擦除笔迹会对它二次打洞）。撤销会一并还原遮罩与层序。
Alt/Ctrl+ 右键手势与右键菜单共用右键，因此画布区域不会弹出浏览器自带的上下文菜单；选择/旋转手势优先于菜单。- 插入的资源存在 IndexedDB，因此浏览器隐私模式或手动清站点数据后，自动恢复里的图片/SVG 会丢失（导出的
.wbd内嵌资源，不受影响）。 - 视频与 GIF 动画暂不支持（GIF 只取首帧作为静图）。
- 只有撤销，没有重做（有意保持的轻量心智模型）。