脚本语言 订阅所有【脚本语言】的日志

Javascript汉字笔画笔顺绘制库Hanzi Writer使用示例

编辑:dnawo 日期:2020-03-30

字体大小: 小 中 大
先在页面引入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

上一篇: 阿里巴巴西溪园区樱花大道
下一篇: WinForm未能加载文件或程序集AxInterop.WMPLib：生成此程序集的运行时比当前加载的运行时新解决方法
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 6826
发表评论
请登录后再发表评论！