纯 HTML 单文件实现类 Miro 实时协作白板原型——WorkBuddy 实战

纯 HTML 单文件实现类 Miro 实时协作白板原型——WorkBuddy 实战

无框架、无构建工具、无外部依赖，一个 HTML 文件搞定可交互白板原型。

前言

Miro、Figma 等在线协作白板工具功能强大，但当你只需要快速出一个原型给团队评审时，它们反而显得过重。本文分享如何用 WorkBuddy 生成一个纯 HTML 单文件的协作白板原型，包含画布绘制、图形拖拽、缩放平移等核心交互，零外部依赖，双击即用。

一、为什么是单文件 HTML

对于原型验证阶段，单文件 HTML 是最高效的选择。

二、核心技术选型

• 渲染层：Canvas 2D API（绘图）+ SVG（图形元素）
• 交互层：原生 JavaScript 事件系统
• 样式层：内联 CSS，无外部框架
• 架构：单文件，无模块化，无构建步骤

三、实现的交互功能

3.1 画布操作

• 无限画布平移（按住空格+拖拽，或鼠标中键）
• 滚轮缩放（以鼠标位置为中心）
• 缩放范围限制（10% ~ 400%）

3.2 图形元素

• 矩形、圆形、文本框、箭头连线
• 拖拽移动、调整大小
• 选中/多选/删除
• 颜色与边框自定义

3.3 协作模拟

• 鼠标位置实时同步（模拟多用户光标）
• 操作历史记录（撤销/重做）

四、用 WorkBuddy 生成的全过程

4.1 第一步：描述需求

在 WorkBuddy 中输入：

帮我做一个类 Miro 的实时协作白板原型，要求：
1. 纯 HTML 单文件，无外部资源依赖
2. 支持画布平移、滚轮缩放
3. 支持矩形、圆形、文本框、箭头
4. 元素可拖拽、选中、删除
5. 高质量 UI，深色主题

4.2 第二步：迭代优化

WorkBuddy 生成初版后，逐步提出优化需求：

• "画布缩放时以鼠标位置为中心，不是以画布中心"
• "选中元素时显示8个调整手柄"
• "按 Delete 键删除选中元素"
• "箭头连线要能跟随元素移动自动调整"

技巧：每次迭代聚焦一个功能点，不要一次提太多需求，这样生成质量更高。

4.3 第三步：细节打磨

最后的打磨阶段重点关注：

• 性能：大量元素时使用 requestAnimationFrame 优化重绘
• 手感：拖拽时加入微小的惯性效果
• 视觉：选中态、hover 态、拖拽态的过渡动画
• 快捷键：Ctrl+Z 撤销、Ctrl+A 全选、Ctrl+D 复制

五、踩坑记录

坑1：Canvas vs SVG 的选择

最初全部用 Canvas 渲染，发现文本编辑和事件处理非常麻烦。后来改为 SVG 为主 + Canvas 辅助：

• SVG 处理图形元素（天然支持事件、可编辑文本）
• Canvas 处理背景网格和选区框（性能更好）

坑2：缩放坐标转换

滚轮缩放时，屏幕坐标到画布坐标的转换容易出错。关键公式：

// 以鼠标位置为中心缩放
const mouseX = (e.clientX - offsetX) / scale;
const mouseY = (e.clientY - offsetY) / scale;
scale = newScale;
offsetX = e.clientX - mouseX * scale;
offsetY = e.clientY - mouseY * scale;

坑3：单文件体积控制

功能多了之后单文件容易膨胀。解决方法：

• CSS 用缩写属性
• JS 去除冗余注释（发布版）
• 合并相似功能函数

六、最终效果

一个 800 行左右的 HTML 文件，双击浏览器打开即可使用：

• 流畅的画布平移缩放
• 直观的图形拖拽编辑
• 专业感的深色 UI
• 零安装、零配置、零依赖

七、总结

WorkBuddy 在这个场景中的价值：

1. 快速出原型：从需求到可交互原型，迭代3轮即可用
2. 零环境配置：不需要 Node.js、不需要 npm install、不需要 webpack
3. 直接交付：生成的文件可以直接发给同事，双击就能看

适合所有需要快速验证交互想法的场景。

标签：#WorkBuddy #前端开发 #白板原型 #HTML