写了一个汉字笔顺动画生成工具 (Chinese Stroke Generator),已用于我的独立站 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yarkyaonj
V2EX    分享发现

写了一个汉字笔顺动画生成工具 (Chinese Stroke Generator),已用于我的独立站

  •  
  •   yarkyaonj 19 小时 54 分钟前 847 次点击

    大家好,

    前段时间在这个节点分享过我做的汉字笔顺查询和练习站( HanziStroke.com ),感谢当时各位 V 友的反馈和建议。

    在开发过程中,我发现市面上虽然有现成的笔顺数据源,但很少有方便后端批量生成 GIF 动画的轻量级工具。

    于是我花了一些时间,把网站后端的 核心 GIF 生成逻辑 剥离并整理了出来,做成了一个独立的 CLI 工具,现在开源给大家。

    项目地址

    Github: https://github.com/Yark-yao/Chinese-Stroke-Order-Generator

    这个工具能做什么?

    1. 生成动画: 输入汉字,输出流畅的笔顺 GIF 。
    2. 批量处理: 支持传入文本文件,批量生成(比如一次性生成 HSK 1 级的所有生词)。
    3. 高度定制: 可以自定义笔画颜色、轮廓颜色、动画速度等。

    技术栈

    主要是基于 Hanzi Writer+Puppeteer+GIFEncoder 实现的,处理了 SVG 路径到 GIF 帧的渲染逻辑。其实大部分都是 AI 写的。

    演示

    Live Demo (实际应用效果): https://hanzistroke.com (网站上的所有笔顺动画 gif 图都是用这个脚本生成的)

    20 条回复    2025-12-16 16:55:52 +08:00
    rrZ2C
        1
    rrZ2C  
       19 小时 48 分钟前
    cool
    yarkyaonj
        2
    yarkyaonj  
    OP
       19 小时 33 分钟前
    @rrZ2C 多谢
    1daydayde
        3
    1daydayde  
       19 小时 32 分钟前
    不错,适合刚开始练字的小学生。再搞一个小程序吧,方便使用。
    IlIl
        4
    IlIl  
       19 小时 29 分钟前
    不是,一个教写汉字的网站没有中文 i18n ,做着是准备出海给歪果仁使用的么
    yarkyaonj
        5
    yarkyaonj  
    OP
       19 小时 28 分钟前
    @IlIl 是的,出海的网站
    cfu18
        6
    cfu18  
       19 小时 22 分钟前
    很早以前搞了一个输入汉字生成字贴的小程序,用的也是 Hanzi Writer
    某天起,腾讯不备案就搜索不到,
    折腾了好久备案还是过不了,一堆理由,放弃
    imsoso
        7
    imsoso  
       19 小时 14 分钟前
    网站漂亮,适合家里有小学生的
    yarkyaonj
        8
    yarkyaonj  
    OP
       19 小时 10 分钟前
    @imsoso 哈哈 谢谢
    yarkyaonj
        9
    yarkyaonj  
    OP
       19 小时 10 分钟前
    @cfu18 嗯 ,我主要是出海给外国人看的
    marcong95
        10
    marcong95  
       18 小时 57 分钟前
    好像有一些复杂的笔画的动画有点奇怪,例如号最后一笔的竖横折钩,有种就是一个圆形从左上到右下扩大填充颜色的感觉,并不是真的路径动画的感觉,用 PixPin 录屏后慢放可以证实。不过应该是 Hanzi Writer 的问题?

    febrekuk
        11
    febrekuk  
       18 小时 54 分钟前
    体验了下,给小学生用感觉会很棒,animate 速度再慢一点
    yarkyaonj
        12
    yarkyaonj  
    OP
       18 小时 51 分钟前
    @febrekuk 好的,感谢你的反馈
    yarkyaonj
        13
    yarkyaonj  
    OP
       18 小时 51 分钟前
    @marcong95 收到,我去看看怎么回事,谢谢你的反馈
    dassh
        14
    dassh  
       18 小时 40 分钟前
    做得真好!动画确实如#11 说的,慢一点会更好
    yarkyaonj
        15
    yarkyaonj  
    OP
       18 小时 36 分钟前
    @dassh 谢谢你的鼓励,对我很重要
    ludan110
        16
    ludan110  
       18 小时 13 分钟前
    好厉害的项目!
    yarkyaonj
        17
    yarkyaonj  
    OP
       18 小时 12 分钟前
    @ludan110 感谢你的夸赞,很开心
    manhere
        18
    manhere  
       18 小时 10 分钟前
    zdic.net 的体验更好
    yarkyaonj
        19
    yarkyaonj  
    OP
       18 小时 8 分钟前
    @manhere 好的,我去学习一下这个网站,感谢你的反馈
    lyqiang
        20
    lyqiang  
       12 小时 25 分钟前   1
    之前教小孩笔顺的时候,经常是百度搜一下,如果是多个字就得搜一下删除再搜下一个,嫌麻烦,
    后来就做基于 Hanzi Writer 做了一个小程序,可以输入多个字,点哪个看哪个,有需要的可以用起来
    「学习成长小助手」
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     879 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 21:21 PVG 05:21 LAX 13:21 JFK 16:21
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86