左 PDF、右白板：我给自己做了个「错题整理」的小工具

从一个下午的崩溃说起

前阵子整理孩子的错题，我卡在一个特别笨的环节上。

材料是一份几百页的 PDF 试卷合集。我需要做的事很简单：把里面某几道题挑出来，重新排到一页纸上，打印出来让他重做一遍。

听起来十分钟的事，我折腾了一下午：截图、裁掉边上的答案、粘进 Word、一张张拖到差不多对齐的位置、再反复调大小。改到第三版的时候我发现——我在用「打字机」做「拼贴画」的活。

于是我干脆停下来，写了个工具。

它长这样

左边是 PDF，右边是一块白板。

在左侧页面上按住鼠标拖一个框，框住要的那道题，浮出的小条上点「→ 贴到白板」，那道题就变成一张高清图，落在右边的白板上。

贴第二道、第三道，它不会叠在一起，而是自动往下排成整齐的一列。想改动就拖、想放大就拖角、圈重点就直接拿画笔在图上画。

三个我觉得最关键的设计

一、贴过去的是高清图，不是「截屏」

这是我最先解决、也最影响体验的一点。

一般的截图工具，拿到的是屏幕上那块像素——按 100% 缩放看还行，一放大就糊，打印更是一团糟。

这个工具是在渲染阶段按更高倍率重新绘制那块区域（通常是 2–4 倍分辨率），所以贴到白板上的图，放大看依然清楚，最后打印出来也是锐利的。

顺手还做了个「贴文本」：如果 PDF 里那道题本身带文字层，可以把它变成一段可编辑的文字，而不是图。

二、批注必须跟着题图走

我一开始的版本里，画笔就是个独立的画笔——你在图上画个圈，然后把图拖走，那个圈就留在原地了。

这显然不对。批注的意义是「这道题的这个位置要注意」，图和批注必须是一个整体：

•  拖图，圈跟着动
•  缩放图，圈跟着缩
•  删图，圈一起删（Ctrl+Z一步就能全回来）
•  想单独改某个圈，Alt+ 点击，把它单独拎出来

这个细节听起来小，但它决定了这个东西是「能用」还是「用着别扭」。

三、贴完能一键排好

贴到第七八张的时候，人会开始烦：位置歪了、间距不匀、想换个排法得手动挪半天。

所以工具条里放了一个「排列」菜单：

一次点击，全部摆好；排错了Ctrl+Z一步回去。

思维导图：给知识点画个关系图

整理错题到一定阶段，光「按顺序排」就不够了——你需要看见知识点之间的关系。

所以「思维导图」那一项，我给它加了自动连线：

点一下，中间那张卡片留在原位，其余几张贴在周围的卡片自动绕成一圈等角度分布，并且从中心拉出灰色的细曲线连到每一张。

线的实现方式有点偷懒但很好用：它不存坐标，只记住「我连的是哪两张卡片」，每次重绘时按两张卡片当时的位置现算。

结果就是——你拖任何一张卡片，线会自己跟着弯；你删掉一张，那条线自动消失；你重新排一次，线按新布局重画，永远不会出现「线和卡片对不上」的情况。

A4 页面模式：直接排到纸上

前面那些都是「无限画布」上的操作——内容多了就往外扩，很自由，但要打印就还得靠导出时自动分页，位置不完全可控。

所以我加了第二种模式：A4 页面。

切过去之后，白板上会真的铺出 A4 纸（210×297mm，可以切横向），你就在纸的范围内排版：

•  贴进去的内容会落在当前页里，从页顶往下排；一页排满会提示并从页顶重新开始
•  可以加多页，顶部有页码条：‹ 第 2/3 页 ›＋ 添加页 删除页
•  导出 PDF 时一张纸就是一页，1:1 还原，不用再担心被自动分页切在半路

有个细节我特意处理了：切换模式不会移动任何元素。纸张只是一层「打印边界」的参考格，内容始终在原来的坐标上。所以你可以先在无限画布上随手铺，觉得差不多了切到 A4 看看会被怎么切，再切回去调整——来去自由。

技术上，我刻意做了几个「不」

这东西不复杂，但我在实现上刻意守了几条：

不引框架。原生 ES Module，没有构建步骤，改一行刷新就见效。整个项目就是一个index.html加几个 js/css 文件。

不引依赖。唯一的第三方是内置在仓库里的 pdf.js（PDF 渲染总得有人干这活）。除此之外零 npm 包。

不引 PDF 库。导出 PDF 那部分是自己手写的极简生成器——把每页渲染成 JPEG，塞进 PDF 对象，手写交叉引用表。不到三百行，省掉了一个几百 KB 的依赖，还顺便完全掌控了分页和切页逻辑。

不上传文件。PDF 是在你自己的浏览器里解析的，文件本身从来没有离开过你的电脑。

怎么用

代码在 GitHub 上，MIT 协议：

•  仓库：https://github.com/pretenderlu/pdf-board^[1]
•  想先看看长什么样：仓库里的docs/demo.pdf是一份全是占位文字的示例试卷，可以直接拿来试框选

两种用法：

我自己的用法是后者：扔在家里那台小服务器上，手机、平板、电脑打开都是同一块白板，出门在外用隧道也能连回去。

最后

这东西没有多高深的技术，它解决的是一个很具体的痒处：我不想再截图、裁切、拖 Word。

如果你也在做类似的事——整理错题、拼卷子、把扫描件里的某道题抠出来重排——可以直接拿去用。用着哪里别扭，或者缺什么，欢迎在仓库里提 issue，我大概率会加。

毕竟是给自己写的工具，改起来没什么心理负担。