汉字按笔画书写生成动画，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 < 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 75x75var 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 pathspath.style.fill = '#555'group.appendChild(path)})}})

输出结果：

还可以生成书写动画，功能很强大。

Hanzi Writer github地址->Hanzi Writer github地址

汉字按笔画书写生成动画，svg (使用Hanzi Writer)相关推荐

利用GDI书写汉字的笔画顺序
Graphics graphics(*pDC); CString str = "菈"; // CString fname = L"楷体_GB2312"; int ...
Java字母笔顺_Android实现中文汉字笔划(笔画)、中文拼音排序、英文排序
一.需求描述最近要做一个类似微信的,在登录界面选择国家地区的功能,微信有中文汉字笔画排序以及中文拼音排序等几种方式,如下所示: 微信:简体中文.拼音排序微信:繁体中文.笔画排序微信英文字母排 ...
Android实现中文汉字笔划(笔画)、中文拼音排序、英文排序
发布时间:2018-11-16 技术:Android 概述最近要做一个类似微信的,在登录界面选择国家地区的功能,微信有中文汉字笔画排序以及中文拼音排序等几种方式,如下所示: 简体中文拼音排序;繁体 ...
论文合集 | 李飞飞新论文：深度学习代码搜索综述；Adobe用GAN生成动画（附地址）...
来源:机器之心本文约3200字,建议阅读7分钟. 本文介绍了李飞飞新论文,深度学习代码搜索综述,Adobe用GAN生成动画. 本周有李飞飞.朱玉可等的图像因果推理和吴恩达等的 NGBoost 新论文 ...
汉字的奥秘: 获取汉字的笔画数
汉字的奥秘: 获取汉字的笔画数想想看,如果你需要在代码里面得到汉字的笔画数,该怎么办呢?每到这个时候,我们就一直感慨咱汉字的复杂啊网上搜了一下,能看到的解决方案大抵都是说把所有汉字的笔画预先记录好 ...
matplotlib使用FuncAnimation生成动画中func、frames、fargs参数传递思考
FuncAnimation是matplotlib生成动画的常用类,它的工作原理就是不断调用参数func对应的函数生成动画. FuncAnimation构造方法中关键的三个参数为func,frames, ...
python简单爬虫指定汉字的笔画动图下载
python简单爬虫指定汉字的笔画动图下载分析过程打开网址首页http://www.hanzi5.com 选择一个字,比如"虐" 查看该汉字动图地址右键该汉字动图,选择在新 ...
svg 动画 ------- svg的内容如何围绕自身旋转
svg 动画 ------- svg的内容如何围绕自身旋转前些天研究svg动画这里就不放图了就一个齿轮要一直旋转我先直接 <animateTransform attributeType= ...
[Unity编辑器] 根据图片自动生成动画
根据自己的情况仿照雨松MOMO 写了一个自动生成动画的脚本原地址 http://www.xuanyusong.com/archives/3243 代码: using UnityEngine; u ...
＃135：动画SVG的三种方法
影片下载 (只有MVP支持者可以下载原始高质量的录音以供离线查看.) SVG动画有点独特,因为您可以采用三种截然不同的方法对其进行动画处理. 1.使用CSS @keyframes进行动画处理可以使用 ...

汉字按笔画书写生成动画，svg (使用Hanzi Writer)

汉字按笔画书写生成动画，svg

汉字按笔画书写生成动画，svg (使用Hanzi Writer)相关推荐

最新文章

热门文章

汉字按笔画书写 生成动画 ，svg (使用Hanzi Writer)

汉字按笔画书写 生成动画 ，svg

汉字按笔画书写 生成动画 ，svg (使用Hanzi Writer)相关推荐

最新文章

热门文章

汉字按笔画书写生成动画，svg (使用Hanzi Writer)

汉字按笔画书写生成动画，svg

汉字按笔画书写生成动画，svg (使用Hanzi Writer)相关推荐