绘图与标注工具 Drauu
演示过程中经常需要在幻灯片上临时圈重点、画箭头、写批注。Slidev 内置了基于 Drauu 的绘图标注工具,按下快捷键即可在幻灯片上自由涂画,无需任何插件。
启用绘图
绘图面板挂在顶部工具栏,点击画笔图标即可进入绘图模式:
| 方式 | 操作 |
|---|---|
| 快捷键 | 按 b(或直接按键盘上的 b) |
| 工具栏 | 点击右上角工具栏的画笔图标 |
进入绘图模式后,鼠标变为画笔,可以直接在幻灯片上涂写。再次按 b 或点击图标退出。
工具集
Drauu 内置六种绘图工具,通过顶部工具条切换:
| 工具 | 图标含义 | 用途 |
|---|---|---|
| 画笔 | 铅笔 | 自由涂写、连线、写文字 |
| 直线 | 斜线 | 画直线 |
| 矩形 | 方形 | 圈出重点区域 |
| 圆形 | 圆形 | 圈出对象 |
| 箭头 | 箭头 | 指向说明 |
| 橡皮擦 | 橡皮 | 擦除部分笔画 |
工具条默认收起,进入绘图模式后自动展开。
画笔工具
最常用的工具。按住鼠标左键拖拽即可涂写,笔迹平滑连续:
- 默认黑色,可在颜色面板中更换
- 笔迹粗细可调
- 适合即兴标注、画流程图草图
矩形与圆形
用于框选重点,按住拖拽时实时预览形状:
- 矩形:框出段落、代码块
- 圆形:圈出图表元素
适合强调「这一块很重要」。
箭头
拖拽时从起点拉出箭头指向终点,自动带箭头头:
- 用于指向说明、标注逻辑流向
- 长按可调整角度
橡皮擦
橡皮擦逐笔擦除,只清除被划过的那一笔,不影响其他笔画。
颜色选择
颜色面板在工具条右侧,点击色块切换画笔颜色:
- 内置一组常用色(黑、红、蓝、绿等)
- 支持自定义颜色输入
- 换色后立即生效,不影响已有笔画
同一张幻灯片可以混合多色标注,红色标重点、蓝色标疑问。
撤销与清除
| 操作 | 方式 |
|---|---|
| 撤销上一步 | Ctrl+Z / Cmd+Z |
| 重做 | Ctrl+Shift+Z / Cmd+Shift+Z |
| 清除全部 | 点击工具条垃圾桶图标 |
清除全部会把当前页所有笔画一次性删除,无法恢复,谨慎使用。
快捷键速查
| 快捷键 | 功能 |
|---|---|
b | 进入/退出绘图模式 |
Ctrl+Z | 撤销 |
Ctrl+Shift+Z | 重做 |
Esc | 退出绘图模式 |
自定义样式
绘图工具的默认颜色与粗细可以通过 Frontmatter 的 drauu 配置项调整:
yaml
---
drauu:
enabled: true
color: '#f00'
size: 4
models:
- name: 主画笔
color: '#f00'
size: 4
- name: 标注
color: '#00f'
size: 2
---| 配置项 | 说明 |
|---|---|
color | 默认画笔颜色 |
size | 默认笔迹粗细 |
models | 预设多组画笔,演讲时快速切换 |
使用建议
- 演示中圈重点:讲解到关键结论时临时圈出,比提前做好强调更灵活
- 现场纠错与批注:实时写箭头指向问题点,适合 code review、方案评审
- 与摄像头/录制配合:绘图痕迹会同步进入录屏,讲完即留痕
- 演示结束前清除:退出绘图模式并清除全部笔画,避免污染后续讲解
绘图标注让演示从「单向播放」变成「可交互批注」,是技术分享、评审、教学的常用利器。