汉字按笔画书写 生成动画 ,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地址 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |