# handwrite-on-screen

**Repository Path**: newpc/handwrite-on-screen

## Basic Information

- **Project Name**: handwrite-on-screen
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Unlicense
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-16
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 屏幕批注工具（Handwrite On Screen）

屏幕叠加手写批注工具。基于 Electron + Vue3 + Element Plus，支持多屏叠加绘制、可自定义快捷键、持久化配置、图片保存、工具停靠栏等。

## 功能概览

- 进入/退出绘制叠加层
- 铅笔、画刷、橡皮擦工具切换，粗细、颜色、透明度调节
- 撤销/重做、清屏、显示/隐藏笔迹
- 停靠栏（Dock）快速操作与提示
- 保存当前批注为 PNG 图片
- 自定义快捷键，启动加载配置并即时更新界面文案
- 按键拦截开关：仅拦截配置中的快捷键，不拦截其他按键（适配视频播放空格、左右键）
- 退出绘制时清屏与再次进入恢复上次笔迹的行为可配置

## 界面预览

wps、onenote、pdf 等软件可以直接在屏幕上进行批注，但是在播放网页视频时，或者一些客户端学习软件，无法直接在屏幕上进行批注写作，还需要用纸笔进行计算等等，个人感觉比较麻烦。
使用该工具，可以配合数位板使用，直接在屏幕上一边播放网页、客户端视频，一边听老师讲解、一边进行计算等等。
数位板上可以设置快捷键映射，快速进入、退出绘制，一键清屏（算完一道题后，继续算下一道题，不用橡皮擦慢慢擦除）。

![网页批注示例](./pic/网页上看视频批注.jpg)
网页批注示例：在浏览器里播放网课或视频时，直接在画面上写公式、演算步骤和标注重点。

![主界面](./pic/主界面.jpg)
主界面：设置画笔颜色、粗细、透明度，进入/退出绘制，保存图片以及打开自定义设置等操作入口都在这里完成。

![自定义设置](./pic/自定义设置.jpg)
自定义设置：可以调整快捷键、是否清屏、是否恢复上次笔迹、是否保存桌面背景、收笔压力平滑时间、是否启用压力感应粗细等行为。

![顶部工具条](./pic/顶部工具条.jpg)
顶部工具条：进入绘制后出现在屏幕上方，可随时调整当前工具的颜色、粗细、透明度，并在多屏之间保持一致。

![侧边工具栏 Dock](./pic/侧边工具栏.jpg)
侧边工具栏（Dock）：贴在屏幕右侧，用按钮的形式提供进入/退出绘制、清屏、保存图片、隐藏/显示笔迹等常用操作，并显示对应快捷键。

![安装](./pic/安装.jpg)
安装界面：使用 electron-builder 生成的 Windows 安装包，安装完成后即可在开始菜单或桌面快捷方式中启动本工具。

![截图](./pic/截图.jpg)
截图：在网页、视频或客户端上进行批注时，截取当前画面。可以设置是否截取桌面内容

![数位板](./pic/数位板.jpg)
使用的数位板：高漫 m7，可以选择自己合适的，我买了个不贵的体验下的

## 使用指南

- 启动应用
  - 开发模式：`yarn start`
  - 打包安装：`yarn dist`，生成安装包后安装并运行
- 绘制流程
  - 在启动器点击“进入绘制”，或使用自定义快捷键进入叠加层
  - 在叠加层上进行批注，移动鼠标可见工具光标，按下并拖动绘制
  - 点击“退出绘制”，或使用自定义快捷键退出
- 工具与参数
  - 工具切换：铅笔、画刷、橡皮擦
  - 粗细、颜色、透明度可在启动器或叠加层工具条调整
  - 每种工具的粗细会单独持久化到配置文件的 `toolSizes` 中（铅笔/画刷/橡皮擦互相独立）
  - 切换不同工具时，启动器粗细滑块会自动切换到该工具的预设粗细
- 停靠栏（Dock）
  - 右侧悬浮栏提供快速操作按钮与快捷键提示
  - 可从启动器切换到 Dock 模式
- 保存图片
  - 在启动器或 Dock 中点击“保存图片”，将当前画布导出为 PNG
- 窗口与交互
- 启动器窗口可拖动、可缩放，提供最小化、关闭与切换 Dock 的按钮
- 叠加层工具条可通过快捷键显示/隐藏

## 快捷键

- 默认快捷键（可在“自定义设置”中修改）：
  - 进入绘制：`Control+Alt+C`
  - 退出绘制：`Escape`
  - 撤销：`Control+Alt+Z`
  - 重做：`Control+Alt+Y`
  - 清屏：`Control+Alt+D`
  - 显示/隐藏叠加工具条：`Control+Alt+T`
  - 保存图片：`Control+Alt+S`
  - 隐藏/显示笔迹：`Control+Alt+H`
  - 铅笔：`Control+1`，画刷：`Control+2`，橡皮擦：`Control+3`
- 自定义与显示
  - 打开“自定义设置”，在输入框内直接按目标组合键进行录入
  - 支持清空（按 Delete/Backspace 或点击输入框的清除按钮）
  - 保存后立即写入配置并刷新页面按钮的快捷键信息
- 按键拦截开关
  - 开启时：仅拦截配置中的快捷键，不拦截其他按键（如空格、左右键用于视频控制）
  - 关闭时：不拦截任何按键，不注册全局快捷键

## 配置文件

- 路径：程序文件所在目录下的 `config.json`
  - 主进程在应用目录中创建并读取该文件（默认优先 `app.getAppPath()/config.json`，回退到 exe 同目录）
- 字段说明：
  - `shortcuts`: 快捷键映射对象
    - `enableDraw`、`disableDraw`、`undo`、`redo`、`clear`、`toggleToolbar`、`savePNG`、`toggleStrokes`、`tool_pencil`、`tool_brush`、`tool_eraser`
  - `clearOnDisable`: 退出绘制后是否清屏（默认 `true`）
  - `size`: 默认粗细（数值）
  - `color`: 默认颜色（十六进制，如 `#ff3366`）
  - `alpha`: 默认透明度（0~1）
  - `debug`: 是否开启调试模式（打开 DevTools）
  - `toolSizes`: 按工具保存的粗细 `{ pencil, brush, eraser }`，切换工具时将自动应用对应值
  - `interceptKeys`: 是否只拦截快捷键（默认 `true`）
  - `restoreOnEnable`: 再次进入绘制时是否恢复上次笔迹（默认 `false`）。开启后退出时会缓存当前笔迹，重新进入自动恢复。
  - `relaxTailMs`: 收笔压力平滑时间窗口，单位毫秒（默认 `200`）。用于数位板收笔时，如果最后一小段压力突然变大，将按起笔时的粗细绘制，避免尾部突然变粗。
  - `usePressure`: 是否启用压力感应粗细（默认 `true`）。关闭后将使用固定粗细绘制，不再根据压力变化调整线条宽度，可进一步避免收笔处出现粗点。
- 示例：

````json
{
  "shortcuts": {
    "enableDraw": "Control+Alt+C",
    "disableDraw": "Escape",
    "undo": "Control+Alt+Z",
    "redo": "Control+Alt+Y",
    "clear": "Control+Alt+D",
    "toggleToolbar": "Control+Alt+T",
    "savePNG": "Control+Alt+S",
    "toggleStrokes": "Control+Alt+H",
    "tool_pencil": "Control+1",
    "tool_brush": "Control+2",
    "tool_eraser": "Control+3"
  },
  "clearOnDisable": true,
  "size": 8,
  "color": "#ff3366",
  "alpha": 1,
  "debug": false,
  "toolSizes": { "pencil": 6, "brush": 12, "eraser": 50 },
  "interceptKeys": true,
  "restoreOnEnable": true,
  "relaxTailMs": 200,
  "usePressure": false
}```*** End Patch```

## 编译与运行

- 环境依赖
  - Node.js ≥ 18（建议）
  - Yarn 1.x（项目使用 `yarn@1.22.11`）
- 常用脚本（`package.json` 中定义）：
  - 开发运行主进程：`yarn start`
    - 构建主进程后启动 Electron，使用 `build/main.cjs`
  - 分模块开发与构建：
    - 启动器开发：`yarn dev:launcher`（Vite 开发服务器）
    - 启动器构建：`yarn build:launcher`
    - 叠加层开发：`yarn dev:renderer`
    - 叠加层构建：`yarn build:renderer`
    - Dock 开发：`yarn dev:dock`
    - Dock 构建：`yarn build:dock`
    - 主进程构建：`yarn build:main`
  - 打包发布：`yarn dist`
    - 使用 `electron-builder` 生成 Windows NSIS 安装包，默认产物位于 `dist/`
- 目录说明
  - `src/main.ts`：主进程入口、窗口管理、IPC 通信、配置读写、全局快捷键
  - `src/preload.ts`：隔离上下文的桥接 API（`window.overlay`）
  - `src/launcher`：启动器页面（Vue3 + Element Plus）
  - `src/renderer`：叠加层页面（画布绘制逻辑）
  - `src/dock`：右侧停靠栏页面
  - `build/`：主进程构建输出（CJS）
  - `dist/`：各前端页面构建输出与安装包产物
- 国内源（可选）
  - 若网络较慢，可设置国内镜像源：`yarn config set registry https://registry.npmmirror.com`
  - 可还原为默认源：`yarn config set registry https://registry.npmjs.org`

## 使用逻辑与架构简述

- 主进程
  - 初始化配置文件，广播初始参数（颜色、粗细、透明度、工具粗细等）
  - 根据 `interceptKeys` 注册/取消全局快捷键（仅注册配置中的快捷键）
  - 处理设置更新，写入 `config.json`，并广播 `ui:config` 到各窗口
  - 通过 `did-finish-load` 在窗口加载完成后主动推送配置，避免首次显示默认值
- 渲染层（叠加层）
  - 维护 `undoStack/redoStack` 存储笔迹；橡皮擦使用 `destination-out` 清除
  - 退出绘制时：若 `clearOnDisable=true` 缓存当前笔迹供恢复；否则不缓存
  - 再次进入绘制时：若 `restoreOnEnable=true` 且存在缓存，则恢复并重绘
- 多屏支持
  - 为每个显示器创建独立叠加层窗口；进入/退出绘制会同步所有叠加层
- 粗细与工具

  - 工具切换时会根据 `toolSizes` 自动应用该工具的粗细；调整粗细会写回到配置中对应工具

- IPC 通道（部分）
  - 主进程 → 渲染层：`overlay:setDrawEnabled`、`overlay:setTool`、`overlay:setColor`、`overlay:setSize`、`overlay:initToolSizes`、`overlay:setAlpha`、`overlay:toggleToolbar`、`overlay:requestSavePNG`
  - 渲染层 → 主进程：`renderer:savePNG`、`renderer:announceSize`、`renderer:setToolSize`
  - 任意窗口 ←→ 主进程：`config:get`、`ui:config`、`config:set`、`ui:pauseShortcuts`、`ui:resumeShortcuts`

## 常见问题

- 快捷键显示不更新
  - 请执行 `yarn build:launcher`/`yarn build:dock` 后再 `yarn start`
  - 确保 `config.json` 键名与界面一致，保存后会主动刷新界面文案
- 视频播放按键被拦截
  - 开启“拦截按键”时仅拦截配置中的快捷键；若仍受影响，请关闭“拦截按键”
- 配置未生效或被覆盖
  - 确认 `config.json` 在程序路径（应用目录/安装目录）下；主进程仅在不存在时写入默认配置
- 颜色选择未生效
  - 叠加层支持 `#rgb`、`#rrggbb`、`rgb(...)`、`rgba(...)` 格式；若颜色仍未变化，请确认未处于橡皮擦工具
- 启动后粗细未匹配工具
  - 已支持按工具记忆粗细；请确认 `config.json.toolSizes` 中三种工具的值是否存在并正确

## 作者与联系方式

- 作者：newpc
- 邮箱：348246463@qq.com
- QQ 群：731235693
````