slidev-drawings

Slidev 中的绘图

此技能介绍 Slidev 内置的绘图和批注功能，该功能由 drauu 提供支持，可让你在演示期间实时绘图、高亮和批注幻灯片。

何时使用此技能

• 在演示期间突出显示重要内容
• 即兴绘制图表
• 为代码或图片添加批注
• 互动教学
• 头脑风暴可视化

启用绘图

在 Frontmatter 中

---
drawings:
  enabled: true
---

完整配置

---
drawings:
  enabled: true
  persist: false
  presenterOnly: false
  syncAll: true
---

绘图选项

选项	类型	默认值	说明
enabled	boolean/string	true	启用绘图（true、false、'dev'）
persist	boolean	false	将绘图保存到 .slidev/drawings/
presenterOnly	boolean	false	仅演示者可以绘图
syncAll	boolean	true	在所有客户端之间同步绘图

使用绘图工具

通过 UI

1. 点击导航栏中的钢笔/铅笔图标
2. 绘图工具栏随即显示

工具栏选项

• 钢笔：自由绘图
• 直线：绘制直线
• 箭头：绘制带箭头的线条
• 矩形：绘制矩形
• 椭圆：绘制圆形/椭圆
• 橡皮擦：移除绘图
• 清除：移除所有绘图

绘图工具详解

钢笔工具

• 自由绘图
• 可调整笔画宽度
• 颜色选择

Usage: Click and drag to draw
Good for: Underlining, circling, quick annotations

直线工具

• 绘制直线
• 按住 Shift 可绘制水平/垂直线

Usage: Click start point, drag to end
Good for: Connecting elements, pointing

箭头工具

• 绘制带箭头的线条
• 用于指示方向

Usage: Click start, drag to arrow point
Good for: Showing flow, indicating direction

矩形工具

• 绘制矩形/正方形
• 按住 Shift 可绘制正方形

Usage: Click corner, drag to opposite corner
Good for: Highlighting areas, boxing content

椭圆工具

• 绘制圆形/椭圆
• 按住 Shift 可绘制正圆

Usage: Click center, drag to edge
Good for: Circling items, attention markers

橡皮擦

• 移除指定绘图
• 点击绘图即可将其擦除

Usage: Click on drawn elements to remove
Good for: Correcting mistakes, cleaning up

支持手写笔/笔

自动检测

Slidev 会自动检测手写笔输入：

• 压力感应（如果支持）
• 防误触
• 自然的绘图体验

iPad + Apple Pencil

以下方式均可流畅使用：

• iPad 上的 Safari
• iPad 上的 Chrome
• Sidecar（将 iPad 用作第二屏幕）

颜色和样式

更改颜色

点击绘图工具栏中的颜色选择器：

• 可选预设颜色
• 部分主题支持自定义颜色

笔画宽度

调整笔画宽度以适应：

• 细线（精准）
• 粗线（醒目）

保存绘图

启用持久化

---
drawings:
  persist: true
---

存储位置

绘图保存到：

.slidev/drawings/[slide-number].svg

优点

• 页面重新加载后绘图仍会保留
• 可包含在导出内容中（PDF 等）
• 便于进行版本控制（SVG 格式）

清除已保存的绘图

删除 .slidev/drawings/ 中的文件，或：

• 在绘图模式下使用“清除”按钮
• 在演示者模式下清除

仅演示者模式

配置

---
drawings:
  presenterOnly: true
---

行为

• 仅演示者可以绘图
• 所有观众都能看到绘图
• 观众无法意外绘图

同步

同步所有客户端

---
drawings:
  syncAll: true
---

所有已连接的客户端都能实时看到绘图。

禁用同步

---
drawings:
  syncAll: false
---

只有演示者的绘图会同步给观众。

最佳实践

1. 提前准备关键批注

提前确定要突出显示的内容：

2. 使用合适的工具

需求	工具
高亮文本	钢笔（下划线）
指示某个对象	箭头
对元素分组	矩形
标记重要内容	椭圆

3. 颜色选择

• 红色：错误、警告、重要内容
• 绿色：成功、正确、良好
• 蓝色：信息、备注
• 黄色：高亮（若在主题背景上清晰可见）

4. 随画随清

• 继续讲解前擦除不必要的绘图
• 绘图应简洁且有意义
• 开始讲解新概念时使用“清除”

5. 练习绘图

• 测试手写笔的压力和速度
• 练习常见形状
• 熟悉绘图快捷方式

键盘快捷键

绘图模式处于激活状态时：

按键	操作
1	画笔工具
2	直线工具
3	箭头工具
4	矩形工具
5	椭圆工具
e	橡皮擦
c	清除所有内容
Esc	退出绘图模式

与幻灯片集成

在代码上绘图

# Code Review

```python
def calculate(x, y):
    result = x + y  # Circle this line
    return result

演示期间，用圆圈标出重要代码行。

### Drawing Over Diagrams

```markdown
```mermaid
graph LR
    A --> B --> C

讲解时，用箭头描绘流程。

### Drawing Over Images

```markdown
![Architecture](/images/architecture.png)

Annotate specific components during walkthrough.

常见模式

高亮并讲解

1. 显示幻灯片内容
2. 激活绘图模式
3. 圈出或划线标记要点
4. 边讲解边指示

实时绘制图表

1. 显示空白或部分完成的图表
2. 边讲解边绘制连接线
3. 用矩形添加标签

代码讲解

1. 显示代码块
2. 绘制箭头来展示执行流程
3. 圈出正在讨论的变量
4. 在返回值下方划线

前后对比

1. 在旧方案上画“X”
2. 在新方案上画对勾

故障排除

未显示绘图内容

1. 检查 drawings.enabled: true
2. 刷新浏览器
3. 检查是否存在 CSS 冲突

同步问题

1. 验证 syncAll 设置
2. 检查网络连接
3. 刷新所有客户端

无法持久化

1. 检查 persist: true
2. 确认 .slidev/ 目录存在
3. 检查文件权限

触控笔无法使用

1. 检查浏览器兼容性
2. 确认触控笔已连接
3. 尝试使用其他浏览器

输出格式

配置绘图时：

---
drawings:
  enabled: true      # Enable drawing feature
  persist: true      # Save drawings between sessions
  presenterOnly: true # Only presenter can draw
  syncAll: true      # Sync to all viewers
---

幻灯片绘图计划：

1. [要绘制或高亮的内容]
2. [要使用的工具]
3. [颜色选择]
4. [讲解的哪个阶段]

清理：

• 之前清除：[是/否]
• 之后清除：[是/否]