欢迎光临

木子屋

标题: Javascri&#112;t汉字笔画笔顺绘制库Hanzi Writer使用示例

作者: dnawo

日期: 2020-03-30 06:40 PM

分类: 脚本语言

内容: 先在页面引入Hanzi Writer脚本：
复制内容到剪贴板 程序代码<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js"></script>
1、静态输出汉字
复制内容到剪贴板 程序代码<div id="character-target-div"></div>
<script type="text/javascript">
.ready(function(){
var writer = HanziWriter.create('character-target-div', '木', {
width: 200,
height: 200,
padding: 5,
strokeColor: '#555'
});
});
</script>
加载本地汉字数据（下同）：
复制内容到剪贴板 程序代码<div id="character-target-div"></div>
<script type="text/javascript">
.ready(function(){
var writer = HanziWriter.create('character-target-div', '木', {
width: 200,
height: 200,
padding: 5,
strokeColor: '#555',
charDataLoader: function(char, onComplete) {
$.getJSON("/hanzi-writer-data-2.0.1/data/" + char + ".json", function(charData) {
onComplete(charData);
});
}
});
});
</script>
2、动态书写汉字
复制内容到剪贴板 程序代码<div id="character-target-div"></div>
<script type="text/javascript">
.ready(function(){
var writer = HanziWriter.create('character-target-div', '子', {
width: 200,
height: 200,
padding: 5,
showCharacter: false
});
writer.animateCharacter();
});
</script>
3、书写汉字笔画笔顺
复制内容到剪贴板 程序代码<div id="character-target-div"></div>
<script type="text/javascript">
.ready(function(){
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');
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);
path.style.fill = '#555';
group.appendChild(path);
});
}
HanziWriter.loadCharacterData('屋').then(function(charData) {
var target = document.getElementById('character-target-div');
for (var i = 0; i < charData.strokes.length; i++) {
var strokesPortion = charData.strokes.slice(0, i + 1);
renderFanningStrokes(target, strokesPortion);
}
});
});
</script>
相关资源
[1].hanziwriter.org：https://hanziwriter.org/
[2].hanzi-writer：https://github.com/chanind/hanzi-writer
[3].hanzi-writer-data：https://github.com/chanind/hanzi-writer-data
[4].makemeahanzi：https://github.com/skishore/makemeahanzi

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 2.004 ms

返回

标题: Javascri&#112;t汉字笔画笔顺绘制库Hanzi Writer使用示例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 2.004 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 2.035 ms

返回