3K star！这个老外居然开发了一套汉字库，爱了爱了！

* 戳上方蓝字「 开源先锋 」关注我

推荐阅读：

大家好，我是开源君！

随着全球化的推进，汉字作为中华民族传统文化的重要组成部分，越来越受到国际社会的关注。然而，对于非母语者来说，学习汉字的笔画顺序是一项极具挑战性的任务。

为了帮助这些人更好地学习汉字，网上有位歪果同仁开发了一个非常实用有意思的的项目 - hanzi-writer 。

今天开源君和大家聊聊这个项目。

项目简介

Hanzi-writer 是一个用于汉字笔画顺序动画的 JavaScript 库，里面提供了大量精确的汉字笔画数据，可以通过手绘模仿的方式来学习和练习书写汉字,适用于简体和繁体字符。

通过使用这个库，我们可以在网页、移动应用等平台上轻松地查看汉字的笔画顺序动画。

该项目的数据源来自于 "让我成为汉字 (Make Me a Hanzi)" 项目，并进行了一些细微调整。

目前在github上面收获了3K star，可见还是有非常多的朋友喜欢热爱中文的。

性能特色

快速安装

可以使用script标签加载 Hanzi Writer，最简单的就是从 jsdelivr CDN 加载 Hanzi Writer JS，将以下内容放入网页的头部:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hanzi-writer.min.js"></script>


另外，也可以通过npm 加载 Hanzi Writer

npm install hanzi-writer
const HanziWriter = require('hanzi-writer');


基本使用体验

想要在屏幕上直接渲染，方法很简单。例如，新建一个目标div标签

<div id="character-target-div"></div>


再创建 HanziWriter 实例，输入下面Javascript代码

var writer = HanziWriter.create('character-target-div', '我', {
width: 100,
height: 100,
padding: 5
});


效果如下：

当然还可以对字体的大小，高度，颜色进行自行定义调整。

如果希望有动画的效果，可以调用 animateCharacter() 方法来让它运动起来。

<div id="character-target-div"></div>
<button id="animate-button">动画</button>


对于的代码修改为

var writer = HanziWriter.create('character-target-div', '国', {
width: 100,
height: 100,
padding: 5,
showOutline: true
});
document.getElementById('animate-button').addEventListener('click', function() {
writer.animateCharacter();
});


效果如下：

动画的方式也很多，包括循环动画，词组动画等等。

另外还提供有一些高级用法，包括自定义背景、加载汉字数据等等。

以及API接口调用。

不得不说，项目作者是非常精通中文的。

HanziWriter 是一个非常实用的开源项目，它为我们提供了一种简单易用的方法来展示汉字笔画顺序动画。通过利用这个库，我们可以帮助更多的人更好地学习和掌握汉字书写技巧。

更多项目细节，感兴趣的可以到项目地址进行查看：

项目地址：
https://github.com/chanind/hanzi-writer