Tegaki笔顺引擎解析KanjiVG、Hershey参考匹配如何让书写顺序自然如手【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegakiTegaki 是一个为 Web 打造的手写动画库它把任意字体的文本拆解成带时间的笔画让文字像被人一笔一划写出来。而让书写顺序自然如手的关键正是它的笔顺引擎——Tegaki 不依赖字体自带信息字体其实不含笔顺数据而是从 KanjiVG、Hershey 等权威笔顺参考数据中借来标准笔顺再与字体自身的墨迹做几何匹配自动决定每一笔先写谁、往哪个方向运笔。下面带你拆解这套引擎的 5 个核心环节。参考数据源从 KanjiVG 与 Hershey 学会笔顺Tegaki 的笔顺引擎采用数据集驱动策略每个参考数据源只需回答三个问题——有几笔、按什么顺序写、笔往哪个方向走而真正渲染的几何形状始终来自字体本身。参考折线只影响顺序与方向决策不会进入生成的动画数据因此也无需把数据集的版权绑定到产物上见 types.ts 顶部注释。KanjiVG汉字与日文的教科书笔顺汉字、日文假名的参考数据来自 KanjiVG 数据集。每个字符是一份 SVG其中的path元素本身就是按书写顺序排列的笔迹中心线路径方向即运笔方向画布为 109×109、y 轴向下。Tegaki 固定使用某个发布版本KANJIVG_RELEASE r20250816保证生成的数据可复现并优先信任路径 id 中-sN后缀标注的笔顺编号而非文档顺序。整个解析是纯字符串实现Bun CLI 与浏览器内管线都能跑IO 通过注入的 loader 完成kanjivg.ts、kanjivg-fetch.ts。Hershey手写体与印刷体两套拉丁字母笔迹拉丁字母的处理更微妙。KanjiVG 里的拉丁参考是印刷风格——大写的 M 拆成 4 笔、m 拆成 3 笔——但 Caveat 这类手写体的 m 明明是一笔连贯的轨迹。为此 Tegaki 引入 Hershey 字体作为补充它是美国国家标准局博士 A. V. Hershey 数字化的逐字母运笔轨迹天然贴合书写习惯。Tegaki 同时加载两个风格变体hershey.tshershey-script正式手写花体覆盖拉丁字母hershey-simplex朴素印刷体同时是唯一可靠的数字笔顺参考Script 体的数字是双笔装饰字形被排除在外。多个变体并存、让最贴合当前字体的那一套胜出是整台引擎的设计精髓后文详述。注册对齐把参考笔迹套到真实字体上参考数据生活在自己的坐标系KanjiVG 是 109×109而字体墨迹在字体单位里。注册registration步骤就是把两者对齐成同一坐标空间。直接按包围盒缩放对饱满的字符没问题但对细长字符会翻车比如一字的参考高度只是中心线的几像素抖动把它拉伸到字体笔画的整个粗细会严重失真。Tegaki 的对策是某轴上的参考跨度若不足数据集画布的 20%THIN_SPAN_RATIO就判定该轴太薄借用另一轴的缩放系数只对齐中心点。点和顿号这类两侧都极小的标记则整体等比缩放register.ts。笔画匹配算法一次判定是哪笔 往哪写对齐之后核心问题是字体提取出的每一笔对应参考里的哪一笔运笔方向是否相反Tegaki 的匹配算法match.ts做了三个关键简化弧长均匀重采样两条折线都重采样为 24 个等弧长样本。笔画是短而单调的曲线重采样后下标即对应关系无需昂贵的 DTW动态时间规整正反向各评一次每对笔画同时计算正向与反转方向的距离取较小者——于是哪条参考笔画与运笔方向在一次比较里同时确定匈牙利算法精确求解全局分配用 Kuhn-Munkres 算法O(n³)求得最小总成本的一对一分配保证结果确定且全局最优而不是贪心式的近似。匹配成本以字形对角线归一化实测中匹配正确的成本在 0.01~0.06错配普遍 ≥0.15中间留了充足的判断余量。连笔字体的兜底引导式排序Guided Ordering问题在于手写体常常不按参考拆笔。韩文手写字体 Nanum Pen Script 会把 ㅎ 的横与圈一笔写完把 ㄹ 写成一条之字形——笔画数对不上1:1 匹配自然失败。此时登场的是引导式排序guide.ts。它放弃逐笔配对改为投影定位把提取笔画的样本点投影到参考笔画上得到参考笔画序号 沿弧长比例的位置用 35% 分位数作为该笔的起点位置对个别漂到邻近笔画的样本更鲁棒再按起点先后决定书写顺序运笔方向则比较笔画弦向与参考弦向闭合笔画如 ㅇ比较环绕方向。参考还先经过分组再拟合refit把每个字母整体平移到其墨迹实际所在处——因为手写体摆放字母的位置和教科书布局往往差得很远。变体择优Tegaki 如何自动选择最自然的写法回到多变体设计。对于每个字符管线pipeline.ts会独立评估每一个参考变体注册 → 匹配 → 若不干净尝试按参考重新切分/合并笔画regroup→ 重匹配。然后按如下优先级排序择优干净匹配笔画数一致且平均成本 ≤ 0.15优先若存在按字体原样笔画即匹配成功的变体惩罚需要切割字体笔画的变体——Dancing Script 的连笔 w 会采用 Hershey 两笔的手写 w而不是把 KanjiVG 印刷 w 硬切成四笔同等条件下比笔画数一致性再比平均成本。最终赢家决定书写序列干净则完全采用数据集顺序strokeOrderSource dataset不干净但字符属于笔顺有标准的类别如韩文则用引导式排序否则回退到启发式规则上→下、左→右、点画最后。整条决策链在 createReferenceSet 中组装汉字数据集按hanLocale调整先后中文语境 Make Me a Hanzi 优先日文语境 KanjiVG 优先随后是 Hershey 花体、Hershey 印刷体与韩文合成音节带音符的字母如 é查不到时自动回退到基字母e的参考。时序最后由 ordering.ts 按笔画长度与书写速度换算出每笔的 delay 与 duration。小结三件事让自然如手成立数据只借顺序不借形状参考折线决定先写谁、往哪走墨迹几何始终来自字体版权也解耦双向重采样 匈牙利精确匹配便宜、确定且方向与配对一次求解多风格变体择优 引导式兜底印刷字体拿到印刷笔顺连笔手写体拿到连笔笔顺无需为每个字体做任何配置。想动手体验可克隆仓库git clone https://gitcode.com/gh_mirrors/teg/tegaki后运行生成器 CLIcli/index.ts查看每个字形的笔顺来源与匹配成本报告命令stroke-order-report还会输出逐字的匹配明细stroke-order-report.ts。这套参考数据 × 几何匹配的笔顺引擎正是 Tegaki 支持任意字体与任意文字手写动画的底气所在。【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegaki创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考