汉字按笔画书写 生成动画 ，svg (使用Hanzi Writer) |
您所在的位置：网站首页 › 笔画动图 › 汉字按笔画书写 生成动画 ，svg (使用Hanzi Writer) |
汉字按笔画书写 生成动画 ，svg (使用Hanzi Writer)
|
汉字按笔画书写 生成动画 ，svg
最近在做汉字生成笔顺svg文件，和拼音在github上找到了 Hanzi Writer，感觉很好用，记录一下。 Hanzi Writer 对汉字生成svg文件 以中国为例。 安装： npm install hanzi-writer 安装。 const HanziWriter = require('hanzi-writer');展示div: 位于iview tableColumns中。 { title: '笔顺', key: 'action', width: 500, render: (h, params) => { this.svg(params.row) return h('div', { class: 'class_' + params.row.characterId }) } }row.characterName :要生成的汉字 row.characterId: 这一行的id（我放在了一个iview tableColumns中了，使用class+ id 对每行的div起标识，之前也想用id了，但是发现id不可以使用- _ -! 但是用class控制div发现是好使的，所以下面使用class_ + row.characterId控制。小白一个，具体也不知道怎么回事。） 方法： svg (row) { console.log(row) const HanziWriter = require('hanzi-writer') HanziWriter.loadCharacterData(row.characterName).then(function (charData) { /** 每次添加清空原div中内容 */ document.getElementsByClassName('class_' + row.characterId)[0].innerHTML = '' var target = document.getElementsByClassName('class_' + row.characterId)[0] for (var i = 0; i 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) }) } })输出结果： Hanzi Writer github地址->Hanzi Writer github地址 |
还可以生成书写动画，功能很强大。【本文地址】
今日新闻 |
推荐新闻 |