前端开源汉字书写笔画库
前端开源汉字书写笔画库
今天给大家介绍一个开源的汉字库，里面提供了大量精确的汉字笔画数据，可以通过手绘模仿的方式来学习和练习书写汉字——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
以 vue3 为例在项目中引入使用html
<div class="text-card" id="text-card"></div>
复制代码
js
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();
复制代码
使用原始字符数据实现汉字,描边扇形可视化
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+套经典电子书
相关知识
书法讲堂丨重视笔画笔顺教学，规范汉字书写
汉字笔画的书写顺序及口诀
汉字笔画名称及书写笔顺大全Word版.pdf
汉字笔画2024官方下载
陈子豪汉字笔画的书写顺序.doc
汉字书写笔顺规则
汉字的笔画（精选5篇）
孩子学写汉字，有必要注意汉字笔画顺序吗（2024最全解析）
汉字书写笔顺口诀和书写规则
特殊教育：智障儿童汉字笔顺书写教学的策略研究.doc
网址: 前端开源汉字书写笔画库 https://m.huajiangbk.com/newsview659349.html
| 上一篇: 当我使用创意字体生成整套字库 |
下一篇: 中文字体 |
