hanzi-writer汉字笔画练习库

hanzi-writer 汉字笔画练习库（快速上手版）

hanzi-writer 是一款功能强大的汉字笔画练习开源库，支持汉字笔画动画演示、交互式笔画测验等核心功能，适配鼠标/触屏操作，仅需简单配置即可集成到汉字学习类项目中，实用性极强。

一、核心特点

• 支持汉字笔画分步动画展示，还原标准书写顺序；
• 提供交互式笔画测验功能，用户可通过鼠标/手指跟随练习；
• 依赖独立的汉字数据仓库 hanzi-writer-data，支持离线使用；
• 轻量易集成，可灵活自定义样式、动画速度等参数。

二、关键资源

1. 在线演示

可直接体验笔画动画与练习功能：
https://hanziwriter.org/demo.html（以汉字“我”为例，支持笔画测验）

2. 数据依赖

汉字笔画数据存储在独立仓库 hanzi-writer-data，是库的核心依赖：
仓库地址：https://github.com/chanind/hanzi-writer-data
数据来源：基于 Make Me A Hanzi 项目，提取自 Arphic Technology 开源字体，遵循 Arphic Public License 协议。

3. 原始项目参考

（注：原始项目链接 https://makemeahanzi.herokuapp.com/ 目前解析失败，推测为服务不可用，但不影响核心功能使用，数据依赖已独立维护）

三、快速使用（基础集成）

1. 安装依赖

通过 npm 安装核心库与数据仓库：

# 安装 hanzi-writer 核心库
npm install hanzi-writer --save

# 安装汉字笔画数据仓库（按需安装，支持离线使用）
npm install hanzi-writer-data --save

2. 基础集成代码

// 引入核心库
const HanziWriter = require('hanzi-writer');

// 引入指定汉字的数据（以“我”为例，可替换为其他汉字）
const woData = require('hanzi-writer-data/我');

// 初始化汉字笔画组件（target 为 DOM 元素 ID）
const writer = new HanziWriter('target-element-id', '我', {
  // 配置数据加载器（离线使用时必配）
  charDataLoader: function(char) {
    return woData; // 返回预加载的汉字数据
  },
  width: 200,    // 组件宽度
  height: 200,   // 组件高度
  strokeAnimationSpeed: 1, // 笔画动画速度（数值越大越快）
  highlightOnHover: true   // 鼠标悬浮高亮笔画
});

// 启动笔画动画
writer.animate();

// 启动笔画测验（用户需按正确顺序书写）
writer.quiz();

四、补充说明

1. 数据加载：默认情况下，hanzi-writer 会自动从 jsdelivr CDN 加载汉字数据（如 https://cdn.jsdelivr.net/npm/hanzi-writer-data@latest/我.json），无需手动安装数据仓库；若需离线使用，需提前安装 hanzi-writer-data 并配置 charDataLoader。
2. 兼容性：支持主流浏览器及移动端触屏设备，适配汉字学习类 Web/App 场景。
3. 扩展能力：可自定义笔画颜色、粗细、动画延迟等参数，具体可参考官方文档（通过演示页面或仓库 README 延伸查阅）。

五、相关链接汇总

• 在线演示：https://hanziwriter.org/demo.html
• 数据仓库：https://github.com/chanind/hanzi-writer-data
• 核心库（推测）：https://github.com/chanind/hanzi-writer（基于数据仓库关联推导）