我用 Tauri 做了一个约 1.5 MB 的开源屏幕标注工具：MarkerOn

作者自荐：MarkerOn 是我正在维护的开源项目。本文既介绍产品，也复盘透明覆盖层、穿透模式与多窗口协作的实现取舍。

做课堂演示、会议讲解、软件 Demo 或录屏时，我经常遇到一个很小、但会反复打断节奏的问题：想在当前屏幕上圈一个按钮、画一条箭头或临时写两个字，却要先截图、切到编辑器、标完再贴回去。

我想要的体验其实只有一句话：按下快捷键，整个桌面立刻变成画布；讲完按 Esc，继续工作。

于是有了 MarkerOn------一个基于 Tauri v2、Rust、Vue 3、TypeScript 与 Canvas API 的开源屏幕标注工具。它支持 Windows 和 macOS，安装包约 1.5 MB，不需要账号，也没有云端依赖。

从快捷键开始，而不是从一个窗口开始

MarkerOn 平时安静地待在系统托盘，不先弹一个主窗口。Windows 下按 Ctrl+Shift+D，macOS 下按 Command+Shift+D，透明标注层才会出现。

进入后，数字键可以直接切换画笔、荧光笔、箭头、矩形、椭圆、直线、橡皮擦和激光笔，T 是文字，Q/E 切换颜色，Ctrl/Command + 滚轮 调整线宽，Space 呼出工具栏。

这个设计不是为了"炫快捷键"，而是因为讲解过程最怕打断。鼠标正在指着重点时，再把它移到一排按钮上，会让听众丢失注意力。键盘优先的意义，是把界面藏到需要它的时候。

桌面标注的基础是一个透明、无边框、置顶的覆盖窗口。Tauri 负责窗口生命周期与跨平台能力，Rust 后端处理全局快捷键、托盘、窗口层级、截图和平台差异，Vue 与 Canvas 负责绘制交互。

覆盖窗口看起来像"什么都没有"，但它必须同时解决几件互相拉扯的事：

因此，MarkerOn 没有把所有东西塞进一个 WebView。绘制覆盖层和独立工具栏是两个窗口，二者通过事件与命令同步当前工具、颜色、线宽、撤销历史、白板状态和穿透状态。

MarkerOn 最有辨识度的功能是穿透模式。

假设我先圈出网页上的一个按钮。普通标注工具往往要求退出标注，圆圈也随之消失；MarkerOn 可以按 X 切到穿透模式：笔迹继续显示，但点击、滚动与输入会到达下面的网页。需要补一条箭头时，再按一次 X 回到绘制。

实现上，这不是把 Canvas 设成 pointer-events: none 就结束了。桌面覆盖层本身是原生窗口，真正的穿透需要后端切换窗口是否忽略光标事件。与此同时，独立工具栏仍要能接收点击，工具栏抢到焦点后还要避免覆盖层误判状态。

MarkerOn 因此把"绘制窗口是否接收事件""工具栏是否置顶""鼠标是否位于工具栏区域""白板模式是否允许穿透"等状态拆开管理。白板模式本身没有下层应用可操作，所以会禁用穿透，避免出现看似可点、实际上语义不成立的状态。

画笔、直线、矩形和椭圆都可以画在 Canvas 上，但它们的交互并不相同。

自由曲线需要连续采样并平滑；形状工具在拖动过程中需要预览，松开鼠标后才进入历史；文字要处理输入框、确认、二次编辑；橡皮擦既可以局部擦除，也可以删除整个对象；撤销与重做不能只保存一张位图，否则很难继续编辑已有元素。

激光笔又是另一类：它不是永久笔迹，而是带时间衰减的临时轨迹。MarkerOn 使用 Excalidraw 风格的可变宽轮廓来渲染激光轨迹，并让旧位置逐渐淡出。它更接近"引导视线"，而不是"往画布上再加一种颜色"。

用户按 Ctrl/Command+C 复制带标注的屏幕时，独立工具栏如果也在最上层，就很容易跟着进入截图。

MarkerOn 会在截图流程中临时排除或隐藏工具栏，完成捕获后再恢复。Windows 可以使用窗口显示亲和性等系统能力，macOS 则需要配合原生窗口行为处理。这类问题在普通网页应用里几乎不存在，却是桌面覆盖层工具必须面对的细节。

选择 Tauri 的一个直接收益是体积。MarkerOn 不打包完整浏览器内核，而是使用系统 WebView；Rust 处理原生能力，前端只承担绘制与设置界面。

但轻量不只是安装包数字。MarkerOn 也尽量不要求登录、不启动云服务、不把屏幕内容上传到服务器。对讲课、录屏和企业演示来说，这种本地优先比"再多几个模板"更重要。

v2.2.0 还新增了官方 Windows 绿色免安装版。下载 zip 解压后即可运行，配置保存在程序旁边的 data\ 目录，不写 AppData，适合放进自己的工具目录或 U 盘。

桌面覆盖层最难的部分通常不是第一版，而是现实设备组合：多显示器、混合 DPI、数位板、触屏、手写笔、macOS 窗口层级，以及某些全屏视频应用的特殊行为。

这些场景目前仍在持续改进。我不想把"支持 Windows / macOS"写成"所有设备上都已经完美"，所以如果你愿意测试，最有价值的反馈不是一句"好用"，而是：

MarkerOn 的设置页可以导出诊断报告，问题可以直接提交到 GitHub Issues。

如果你平时会讲课、做产品演示、录教程，欢迎拿真实场景来试。也欢迎关注透明覆盖层、跨平台窗口与 Canvas 绘制实现的开发者一起讨论。