卧槽！这个老外竟然开发了一个汉字笔画库

程序员老鱼

发布于 2024-05-10 13:58:57

1240

发布于 2024-05-10 13:58:57

文章被收录于专栏：前端实验室前端实验室

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

Hanzi Writer

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

特点

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

安装使用

可以使用script标签加载

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

也可以通过npm 加载 Hanzi Writer

npm install hanzi-writer

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

html

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

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

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

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 也支持给汉字的偏旁部首上设置不同的颜色

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

连续动画

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

分布绘画

调用animateStroke方法，传入笔画

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

手写测试

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

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

原生汉字 SVG

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

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);
  }
});