[特殊字符] 自己动手做一个类 tldraw 的桌面白板：StepDraw 开源啦（C++ + WebView2 + Canvas）

关键词：C++、Win32、WebView2、Canvas、Electron 平替、单文件绿色应用、流程图

相信很多同学都用过 tldraw 这类在线白板工具------随手画草图、画流程图、写标注，非常顺手。但它是网页版，离线、隐私、本地文件这些场景总差点意思。

于是我写了一个桌面版 ：StepDraw 。它不是一个网页套壳，而是一个用 C++17 + Win32 + WebView2 自研框架驱动的真正桌面应用，最终编译产物是单个 .exe，零 DLL 依赖，双击即用。

这篇文章就带大家看看它做了什么、怎么做的，以及怎么把它跑起来。

一、StepDraw 是什么

StepDraw 是一个类 tldraw 的桌面白板画图工具，支持：

✏️ 自由手绘（铅笔 + 贝塞尔平滑）
🔷 图形：矩形 / 椭圆 / 菱形（流程图三件套）
🔗 箭头自动吸附绑定图形，移动图形时连线实时跟随
📝 文本与图形内标签，自动换行居中
🎨 马卡龙色板、线宽、虚线、字号等样式面板
↩️ 200 步撤销 / 重做、复制、框选、缩放、平移
💾 .stepdraw 文件保存 / 打开 / 导出 PNG / 草稿自动恢复

最重要的是------全功能离线可用，所有数据都在你自己的电脑上。

二、核心亮点：单文件、无依赖

维度	StepDraw	传统 Electron 方案
产物形态	单个 `StepDraw.exe`	一堆 `resources + node + dll`
运行时依赖	仅系统 WebView2（Win11/Edge 自带）	自带几十 MB Node 运行时
启动速度	极快（原生窗口）	受 Node 启动拖累
安装	免安装绿色运行	通常需安装包

这一切得益于自研的 TauriCPP 框架：

C++ 只负责系统能力：原生文件对话框、文件读写、PNG 落盘、窗口标题、错误日志。
前端持有全部文档状态：图形、相机、选择集都在前端，Canvas 2D 渲染，保证 60fps 交互，并做 Per-Monitor DPI 感知。
前后端通过 Promise 桥通信 ：window.__tauricpp__.invoke(cmd, args) 调用原生能力，原生也可 bridge.Emit 反向推送。
前端可脱离 C++ 调试 ：在浏览器里直接打开 frontend/index.html，桥会自动降级为 localStorage mock，改 UI 不用重新编译 C++。

三、它怎么画流程图的？

这是我觉得最值得聊的设计。箭头在两个图形之间自动绑定：

从一个图形拖到另一个图形，端点会记录对方 id，并自动吸附图形边框；
你拖动任意一个图形，连线会实时重算路由跟随；
折线（正交）路由默认开启，可在样式面板切换为直线；
删除图形时，绑定的端点会冻结为绝对坐标，不会凭空消失。

数据模型也很干净，一个 .stepdraw 文件本质就是 JSON：

json 复制代码

{
  "version": 1,
  "app": "stepdraw",
  "shapes": [
    {
      "id": "rect1",
      "type": "rect",
      "x": 0, "y": 0, "w": 100, "h": 60,
      "label": "开始",
      "props": { "stroke": "#1d1d21", "fill": "transparent",
                 "size": "m", "dash": "solid", "font": "m", "route": "elbow" },
      "a": { "id": "rect1", "x": 0, "y": 0 },
      "b": { "id": "rect2", "x": 0, "y": 0 }
    }
  ],
  "camera": { "x": 0, "y": 0, "z": 1 }
}

四、三步跑起来（Windows）

1. 准备环境

Windows 10 / 11
Visual Studio 2022（C++ 桌面开发工作负载）
CMake 3.15+
vcpkg 安装 WebView2 SDK：

powershell 复制代码

vcpkg install webview2:x64-windows-static --classic

记得设置 VCPKG_ROOT 环境变量，或把 vcpkg 装到 C:\vcpkg。

2. 一键构建

powershell 复制代码

# 标准构建（前端资源嵌入 exe）
powershell -ExecutionPolicy Bypass -File build.ps1

# 开发模式（前端从 ./frontend 热加载，改 UI 不重编 C++）
powershell -ExecutionPolicy Bypass -File build.ps1 -DevMode

产物就是：build\Release\StepDraw.exe

首次构建若缺 nlohmann/json.hpp，CMake 会自动从 GitHub 下载，无需手动准备。

3. 开画

双击 StepDraw.exe 即可运行，无需安装。常用操作：

双击图形编辑文字，双击空白新建文本
拖动图形，绑定的箭头自动跟随重连
F12 打开 DevTools 调试前端

五、快捷键速查

操作	快捷键
工具切换	`V` 选择 / `H` 手型 / `D` 铅笔 / `E` 橡皮 / `R` 矩形 / `O` 椭圆 / `F` 菱形 / `A` 箭头 / `T` 文本
撤销 / 重做	`Ctrl+Z` / `Ctrl+Shift+Z`（或 `Ctrl+Y`）
保存 / 另存为 / 打开	`Ctrl+S` / `Ctrl+Shift+S` / `Ctrl+O`
复制 / 全选	`Ctrl+D` / `Ctrl+A`
缩放	滚轮 / `Ctrl+=` `Ctrl+-` / `Ctrl+0` 复位
适应内容	`Shift+1`
平移	空格 + 拖动 / 鼠标中键 / 手型工具

六、写在最后

如果你也在找一个轻量、隐私、离线可用 的画图 / 流程图工具，或者想研究 C++ + WebView2 做桌面应用 的玩法，欢迎 Star / Fork / 提 Issue。

项目仓库：StepDraw
- GitHub：https://github.com/Emsoro/StepDraw.git
- Gitee：https://gitee.com/masonwu21/StepDraw.git
技术栈：C++17 + Win32 + WebView2 + Canvas 2D + nlohmann/json

下一篇打算聊聊 TauriCPP 框架的 IPC 桥设计 和 Canvas 渲染里的相机变换，感兴趣的同学可以关注一下～

如果这篇文章对你有帮助，点个赞再走吧 👍