前端开源汉字书写笔画库

作者：大师兄

2024-06-09
北京
本文字数：2281 字
阅读完需：约 7 分钟

今天给大家介绍一个开源的汉字库，里面提供了大量精确的汉字笔画数据，可以通过手绘模仿的方式来学习和练习书写汉字——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);  }});

复制代码

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

https://github.com/chanind/hanzi-writer

最后

关注【前端实验室】公众号回复： bbbb223

免费领取前端全栈 100+套经典电子书

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/e2e75099e3f9de6413619fa31】。文章转载请联系作者。

大师兄

关注

分享各种前端知识 2021-03-04 加入

欢迎关注公众号：前端实验室分享面经，新技术，实战项目，一起来折腾吧

发布

暂无评论

创作场景

前端开源汉字书写笔画库

Hanzi Writer

特点

安装使用

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

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

连续动画

分布绘画

手写测试

原生汉字 SVG

最后

大师兄

评论