前端演示提效：Pointer/Chalkboard 让你的 Reveal.js 演示文稿更“会说话”

Reveal.js-引入这两个鼠标插件，教学演示更高效：pointer + chalkboard

在做教学演示、技术分享或直播讲解时，观众最怕“看不清你指哪儿”和“抓不住重点”。这篇文章聚焦两款最实用的鼠标增强插件：

• pointer（把系统鼠标变成更醒目的演示指针，支持键盘开关）
• chalkboard（在屏幕上手写/涂鸦，用来圈重点、标注与推导）

如果你用 Reveal.js 做课件或 Demo，这两款插件就能解决“指向清楚、强调有力”的核心诉求。

快速开始

pointer

• 能做什么：把普通鼠标替换/叠加为“演示指针”（可放大、带光晕/颜色），并提供键盘开关。录屏与远程演示更清晰。
• 适用场景：界面走查、步骤讲解、代码评审时的“快速定位”。

安装与引入

GitHub 仓库：https://github.com/burnpiro/reveal-pointer

下载插件后复制到项目目录，再按下文方式引入。

基本用法

import Pointer from "./plugins/pointer/pointer.esm.js";
import "./plugins/pointer/pointer.css";

Reveal.initialize({
  plugins: [Pointer],
});

用法

• 启用/禁用：演示开始时默认启用，结束时默认禁用。
• 可在配置中设置 pointer: { key: "q" } 更改快捷键，q 即为开关指针的键（不区分大小写）。

常用配置

Reveal.initialize({
  pointer: {
    key: "q", // 启用指针的按键，默认 "q"
    color: "red", // 指针颜色，默认 "red"，可用任意合法 CSS 颜色
    opacity: 0.8, // 指针透明度，默认 0.8
    pointerSize: 12, // 指针大小（像素），默认 12
    alwaysVisible: false, // 指针是否始终可见，默认 false
    tailLength: 10, // 尚未实现：指针“尾巴”长度，默认 10
  },
});

小贴士

• 大小与对比度：投影/直播时可适当放大，颜色要与主题有对比，避免混淆。

---

chalkboard

• 能做什么：直接在幻灯片上“画圈/下划线/箭头/写字”，适合临场讲解、知识点强调与思路推导。
• 适用场景：板书式讲解、流程/结构标注、数学/算法演示。

安装与引入

CDN 引入（单页面工程可直接在 index.html 中引入）：

<!-- 黑板插件需要 Font Awesome 字体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css"
/>
<!-- 自定义控件插件：用于打开和关闭注释模式 -->
<script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/plugin.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/style.css"
/>
<!-- 黑板插件 -->
<script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/plugin.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/style.css"
/>

基本用法

Reveal.initialize({
  customcontrols: {
    controls: [
      {
        icon: '<i class="fa fa-pen-square"></i>',
        title: "Toggle chalkboard (B)",
        action: "RevealChalkboard.toggleChalkboard();",
      },
      {
        icon: '<i class="fa fa-pen"></i>',
        title: "Toggle notes canvas (C)",
        action: "RevealChalkboard.toggleNotesCanvas();",
      },
    ],
  },
  chalkboard: {
    // 配置
  },
  plugins: [RevealChalkboard, RevealCustomControls],
});

用法

鼠标或触摸

• 点击左下角“笔”图标：切换笔记画布或黑板。
• 单击左侧颜色选择器：更改颜色（仅在笔记画布或黑板激活时可见）。
• 点击左侧上下箭头：在多个黑板之间切换（仅对黑板生效）。
• 左键拖拽：在笔记画布或黑板上书写。
• 右键拖拽：擦除先前的绘图。
• 触摸并移动：在笔记画布或黑板上书写。

键盘

• BACKSPACE：删除所有黑板绘图。
• DEL：清除笔记画布或黑板。
• C：切换笔记画布。
• B：切换黑板。
• D：下载当前绘图。
• X：向前循环颜色。
• Y：向后循环颜色。

常用配置

• boardmarkerWidth：整数。记号笔线宽，值越大线越粗。
• chalkWidth：整数。粉笔线宽，值越大线越粗。
• chalkEffect：浮点数范围 [0.0, 1.0]。粉笔效果强度，默认 1.0（全效果），0.0 为无效果。
• storage：用于会话存储图纸的可选变量名。
• src：预先录制图纸的可选文件名。
• readOnly：是否阻止更改已存在的绘图。true 为不可更改，false 为可更改；未设置时，返回到已有录制绘图的幻灯片/片段后不允许修改。无论如何，按 DEL（或调用 RevealChalkboard.clear()）可清空当前页绘图。
• transition：幻灯片切换过渡时长（毫秒），用于过渡完成后再绘制注释画布。
• theme：chalkboard 或 whiteboard。
• background：第一个值为（半）透明颜色，用于提示“笔记画布已启用”；第二个值为黑板背景图的文件名。
• grid：是否显示网格及其样式。可设置颜色、线距、线宽，如 { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2 }；设为 false 可关闭网格。
• eraser：橡皮擦图像路径与半径。
• boardmarkers：记号笔颜色及光标列表。
• chalks：粉笔颜色及光标列表。
• rememberColor：是否记住上次选择的颜色。

小贴士

• 开始画之前，先把页面缩放调整到合适比例，避免笔迹遮住关键信息。
• 与 pointer 协同：先用 pointer 快速指位，再用 chalkboard 圈重点，层次更清楚。

---

故障排查与建议

• 版本匹配：确认所用插件与 Reveal.js 主版本兼容（4/5 可能有差异）。
• CDN 与网络：如访问受限，改用本地静态文件或内网镜像。
• 热键冲突：避开 Reveal.js 内置快捷键，或在初始化时关闭冲突键位。
• 录屏设置：使用窗口/屏幕捕获，确保指针与涂鸦效果被录入。

---

结语

精简且高效的组合：pointer 解决“看不清你指哪儿”，chalkboard 解决“如何强调与推导”。先在一页 Demo 练熟开关与书写，再把这套节奏融入整场演示，你的讲解会更有条理、更具吸引力。