汉字按笔画书写 生成动画 ,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 < charData.strokes.length; i++) {
var strokes = charData.strokes.slice(0, i + 1)
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg.style.width = '20px'
svg.style.height = '20px'
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(20, 20)
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)
})
}
})
输出结果:
还可以生成书写动画,功能很强大。
Hanzi Writer github地址->Hanzi Writer github地址