汉字笔顺展示的原理

YaoQi

发布于 2026-03-04 16:07:14

汉字笔顺（Chinese Characters Stroke Orders）规范来自于《通用规范汉字笔顺规范》，国家教育部2020-11-23发布了最新版：

我们可以下载这个pdf格式的文件，搜索相关汉字即可查找它的正确笔顺。

我们也看到很多网站，可以动态显示汉字笔顺，这是怎么做到的呢？

开源库

我发现很多项目都是基于Hanzi Writer这个开源库：

https://hanziwriter.org/

https://github.com/chanind/hanzi-writer

成品小工具介绍

1.汉字笔顺工具 (Bishun Tool)

https://bishun.vercel.app/

https://github.com/iverleung/Bishun

2. Write right

https://writeright.pipecraft.net/zh-CN/

https://github.com/utags/write-right

在Github上搜“bishun”也能搜到相关的小工具项目。

原理

这些工具项目字形库一般都来自Make Me a Hanzi ：

https://github.com/skishore/makemeahanzi

这是我国台湾字体商 Arphic Technology 的开源贡献。

字形是SVG矢量图表示的：

而我们上文提到的笔顺库，则是把这个矢量图中的笔画按顺序排列，得到一个数据库：

比如“中.json”是中字的笔顺数据：

{
  "strokes": [
    "M 254 596 Q 244 603 202 608 Q 189 611 185 605 Q 178 598 189 580 Q 228 507 254 384 Q 260 347 282 324 Q 303 300 307 318 Q 310 328 310 343 L 306 381 Q 305 390 303 399 Q 276 513 267 556 C 261 585 259 594 254 596 Z",
    "M 752 425 Q 765 462 777 498 Q 793 546 828 578 Q 853 603 821 624 Q 793 648 762 666 Q 743 679 717 668 Q 677 655 615 646 Q 575 642 535 636 L 476 628 Q 427 622 380 613 Q 307 603 254 596 C 224 592 237 551 267 556 Q 274 556 286 559 Q 400 587 476 593 L 534 600 Q 604 609 698 615 Q 717 616 724 607 Q 739 583 693 435 C 684 406 742 397 752 425 Z",
    "M 530 370 Q 630 380 764 386 Q 776 387 778 397 Q 779 406 752 425 C 730 441 723 440 693 435 Q 606 420 530 407 L 475 399 Q 385 389 306 381 C 276 378 280 341 310 343 Q 314 343 321 343 Q 382 356 475 365 L 530 370 Z",
    "M 475 365 Q 472 17 485 -11 Q 486 -12 488 -16 Q 503 -32 512 -10 Q 530 32 530 370 L 530 407 Q 531 519 534 600 L 535 636 Q 538 742 559 778 Q 566 794 545 811 Q 520 830 475 843 Q 454 847 441 833 Q 431 826 444 812 Q 472 787 475 753 Q 475 704 476 628 L 476 593 Q 476 517 476 419 Q 475 409 475 399 L 475 365 Z"
  ],
  "medians": [
    [[194,598],[229,572],[236,553],[295,323]],
    [[262,591],[281,579],[471,611],[719,641],[741,638],[777,596],[732,460],[702,446]],
    [[316,350],[330,365],[689,409],[749,405],[768,398]],
    [[449,823],[476,817],[513,781],[505,656],[499,-10]]],
  "radStrokes": [
    3
  ]
}

这种数据格式通常包含两个关键部分：

strokes (笔划)：描述了笔迹的路径。它使用一种类似于 SVG (Scalable Vector Graphics) 的路径数据格式。
- M 254 596：M 代表 “Move to”，将画笔移动到坐标 (254, 596)。
- Q 244 603 202 608 ：Q 代表 “Quadratic Bézier curve”，绘制一条二次贝塞尔曲线，从当前点连接到 (202, 608)，并使用 (244, 603) 作为控制点。
- L 306 381 ：L 代表 “Line to”，从当前点画一条直线到 (306, 381)。
- Z：Z 代表 “Close path”，将路径的终点与起点连接，形成一个闭合的形状。
medians (中轴/骨架)：描述了笔迹的骨架或中心线。这通常用于简化笔迹的形状，去除冗余的细节，以便于模型分析。