中文笔画库

今天给大家介绍一个开源的汉字库，里面提供了大量精确的汉字笔画数据，可以通过手绘模仿的方式来学习和练习书写汉字——`hanzi-writer`

![img](http://banmag.cn:8089/i/2024/07/09/668cdc8a306b7.png)

### **Hanzi Writer**

`Hanzi Writer` 是 javascript 免费开源库，根据汉字书写时按照笔画顺序的特征，可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写汉字。

![img](http://banmag.cn:8089/i/2024/07/09/668cdc9514e63.gif)

#### **特点**

- 丰富性: 包含9000+个常用汉字的笔画数据，覆盖广泛。
- 准确性: 笔画轨迹详细且精准，模拟真实书写体验。
- 开放源代码: 全面免费，可自由使用和扩展，鼓励社区参与和贡献。
- 易用性: 提供简洁的JSON格式数据，易于集成到各类开发环境中。
- 跨平台兼容: 数据基于SVG标准，能在多种设备和浏览器上无缝运行。
- 体积小：Hanzi Writer 库仅仅 30 kb （压缩后仅 9kb!）, 所以添加它不会使网页体积增大。
- 用处广泛：Hanzi Writer 使用 javascript, HTML5 and SVG, 所以它几乎能嵌入到任何平台应用, iOS 应用、安卓应用、桌面端应用和网页。

#### **安装使用**

可以使用script标签加载

```javascript
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>
```

也可以通过npm 加载 Hanzi Writer

~~~bash
npm install hanzi-writer
~~~

##### **以vue3为例在项目中引入使用**

html

```javascript
<div 
  class="text-card"
  id="text-card"
></div>
```

js

```javascript
  import HanziWriter from 'hanzi-writer';
  
   writer.value = HanziWriter.create("text-card", "外", {
    width: 100,
    height: 100,
    padding: 5,
    showOutline: true
```

![img](http://banmag.cn:8089/i/2024/07/09/668cdcece5523.png)

在初始化实例时可以设置参数

```javascript
writer.value = HanziWriter.create("text-card", "外", {
        width: 100,
        height: 100,
        padding: 5,
        showCharacter: false, //不显示汉字
        showOutline: true, //开启动画时，是否显示字
        // radicalColor: "#168F16", // 对偏旁部首着色
        strokeColor: "#000000", //全部着色 这里的颜色只能是16进制的，学英文不显示字
        strokeAnimationSpeed: 5, // 5x normal speed 整个动画的速度
        delayBetweenStrokes: 600, //每一笔之间动画的间隔时间，数字越大，间隔时间越长
        onLoadCharDataSuccess: function (data) {
          //加载汉字成功的回调
          console.log("Success!",data);
        },
        onLoadCharDataError: function (reason) {
          // 加载汉字失败的回调
          console.log("Oh No! Something went wrong :(");
        },
      })
```

##### **偏旁部首上设置不同的颜色**

Hanzi Writer 也支持给汉字的偏旁部首上设置不同的颜色

```javascript
var writer = HanziWriter.create('character-target-div', '草', {
  width: 150,
  height: 150,
  padding: 5,
  radicalColor: '#168F16' // green
});
```

![img](http://banmag.cn:8089/i/2024/07/09/668cdced26236.png)

##### **连续动画**

```javascript
writer.value?.animateCharacter({
  onComplete: function () {
    //动画结束的回调
    console.log("动画结束");
  },
});
```

![img](http://banmag.cn:8089/i/2024/07/09/668cdcece668a.gif)

##### **分布绘画**

调用`animateStroke`方法，传入笔画

```javascript
const animateStroke = ()=>{
    writer.value?.animateStroke(step.value)
    step.value++
  }
```

![img](http://banmag.cn:8089/i/2024/07/09/668cdcecd3456.gif)

##### **手写测试**

调用 quiz() 方法，用鼠标描写

```javascript
var writer = HanziWriter.create('character-target-div', '测', {
  width: 150,
  height: 150,
  showCharacter: false,
  padding: 5
});
writer.quiz();
```

![img](http://banmag.cn:8089/i/2024/07/09/668cdceceae01.gif)

##### **原生汉字 SVG**

使用原始字符数据实现汉字,描边扇形可视化

```javascript
function renderFanningStrokes(target, strokes) {
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.style.width = '75px';
  svg.style.height = '75px';
  svg.style.border = '1px solid #EEE'
  svg.style.marginRight = '3px'
  target.appendChild(svg);
  var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');

// set the transform property on the g element so the character renders at 75x75
  var transformData = HanziWriter.getScalingTransform(75, 75);
  group.setAttributeNS(null, 'transform', transformData.transform);
  svg.appendChild(group);

strokes.forEach(function(strokePath) {
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttributeNS(null, 'd', strokePath);
    // style the character paths
    path.style.fill = '#555';
    group.appendChild(path);
  });
}

HanziWriter.loadCharacterData('是').then(function(charData) {
  var target = document.getElementById('target');
  for (var i = 0; i < charData.strokes.length; i++) {
    var strokesPortion = charData.strokes.slice(0, i + 1);
    renderFanningStrokes(target, strokesPortion);
  }
});
```

![img](http://banmag.cn:8089/i/2024/07/09/668cdced0414d.png)

`Hanzi Writer` 是一个非常强大的汉字资源库，还有很多方法和使用案例，可以访问它的github仓库

> 原文地址 https://cloud.tencent.com/developer/article/2416266