JavaScript -- React实现在页面上写名字（hanzi-writer）react 实现 hanzi-wri

一、实现效果

二、hanzi-writer文档

在 script 标签加载 Hanzi Writer

最简单选项是直接从 jsdelivr CDN 加载 Hanzi Writer JS 。只需将以下内容放入你的网页的头部:

<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>

你也可以拷贝一个下载 Hanzi Writer javascript 文件:
hanzi-writer.min.js - 生产压缩版 (32 kb, 9kb 压缩后的)
hanzi-writer.js - 开发未压缩版本 (72 kb)

上面的脚本将在脚本加载后使全局 HanziWriter 变量可用。

通过 npm 加载 Hanzi Writer

如果你想在 webpack 或 node.js 中包含 Hanzi Writer，你可以从 npm install hanzi-writer 安装。然后，你可以在你的代码中包含 Hanzi Writer

const HanziWriter = require('hanzi-writer');

注意: 兼容旧浏览器

如果你想在旧版本 IE10/IE11 使用 Hanzi Writer，你需要为 Promise api 提供一个填充工具

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

三、代码

例子地址：github.com/KyleXiangSh…

//app.js

import React, { useState, useEffect } from 'react';

const HanziWriter = require('hanzi-writer');

function App() {
  const writerConfig = {
        width: 100,
        height: 100,
        padding: 3,
        showOutline: false,
        showCharacter: false,
        strokeColor: '#000000',//字的颜色
        strokeAnimationSpeed: 5, // 5x normal speed
        delayBetweenStrokes: 50, // milliseconds
        padding: 5
    }

    const drawCharacter = (i,writerConfig,name ) =>{
      const writer = HanziWriter.default.create('name'+i, name[i], writerConfig);
      writer.animateCharacter().then(() => {
          if (name[i + 1]) {
              drawCharacter(i + 1, writerConfig,name)
          }
      }).catch(()=>{
        console.log('json请求失败了!')  
      });
    } 

    const butOnClick = () => {
      let nameValue= document.getElementById("input-name").value;
      if(/[\u4e00-\u9fa5]/.test(nameValue)){
        drawCharacter(0,writerConfig,nameValue)
      }else{
      alert('请输入正确的汉字！')
      }
    }

  return (
    <div className="App">
      <div>
      <input id="input-name" type="text" name="name"></input>
      <button onClick={butOnClick}>开始</button>
      </div>
      <div>
        <div id="name0"></div>
        <div id="name1"></div>
        <div id="name2"></div>
        <div id="name3"></div>
        <div id="name4"></div> 
      </div>
    </div>
  );
}

export default App;

四、总结

1、Hanzi Writer 仅支持中文；

2、通过 npm 加载 Hanzi Writer 请求json时不是很稳定，经常有超时的情况，建议下载 Hanzi Writer javascript 文件；

3、可以下载github上Hanzi Writer运行一下，尝试更多例子；

4、尝试找可以画字母的轮子，意外发现了cnchar，cnchar-draw 库功能基于 hanzi-writer,感兴趣的可以研究一下；