木子屋
 

标题: Javascript汉字笔画笔顺绘制库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">
    $(document).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">
    $(document).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">
    $(document).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">
    $(document).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 0.033 ms

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.033 ms

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.033 ms