在Android上实现汉字笔顺动画效果—

序，万般皆是命，半点不由人。

Hanzi Writer 是 javascript 免费开源库，根据汉字书写时按照笔画顺序的特征，可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写汉字。

特点

丰富性: 包含9000+个常用汉字的笔画数据，覆盖广泛。
准确性: 笔画轨迹详细且精准，模拟真实书写体验。
开放源代码: 全面免费，可自由使用和扩展，鼓励社区参与和贡献。
易用性: 提供简洁的JSON格式数据，易于集成到各类开发环境中。
跨平台兼容: 数据基于SVG标准，能在多种设备和浏览器上无缝运行。
体积小：Hanzi Writer 库仅仅 30 kb （压缩后仅 9kb!）, 所以添加它不会使网页体积增大。
用处广泛：Hanzi Writer 使用 javascript, HTML5 and SVG, 所以它几乎能嵌入到任何平台应用, iOS 应用、安卓应用、桌面端应用和网页。

在Android中使用，我使用的是加载WebView。

写一个html的引用地址，在定义几个和我们安卓交互的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hanzi Writer</title>
    <script src="file:///android_asset/js/hanzi-writer3.js"></script>
    <script src="file:///android_asset/js/polyfill.min.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0);
        }
        #target {
            width: 300px;
            height: 300px;
        }


    </style>
</head>
<body>
<div id="target"></div>
<script>
    let writer;
    function clearCharacter() {
        // 如果已存在 writer 实例，则删除
        if (writer) {
            writer.cancelQuiz(); // 取消正在进行的测试（如果有）
            writer.setCharacter(''); // 将汉字设置为空
            document.getElementById('target').innerHTML = ''; // 清空目标区域
            writer = null; // 将 writer 实例置为 null
        }
    }

    function loadCharacter(character,wide,height) {
        clearCharacter()
        writer = HanziWriter.create('target', character, {
            width: 300,
            height: 300,
            showOutline: true,
            showCharacter: false,
            drawingColor:'#168F16',
            drawingWidth:30,
        });
    }

    function startQuiz() {
        if (writer) {
           writer.quiz({
              onMistake: function(strokeData) {
                AndroidInterface.onMistake(JSON.stringify(strokeData));
              },
              onCorrectStroke: function(strokeData) {
                AndroidInterface.onCorrectStroke(JSON.stringify(strokeData));
              },
              onComplete: function(summaryData) {
                AndroidInterface.onComplete(JSON.stringify(summaryData));
              }
           });
        }
    }

    function getSVG() {
         if (writer) {
            const path = writer.getPath();
            const svg = path.toSVG();
            AndroidInterface.showSVG(svg);
        }
    }

    function init() {
        loadCharacter('');
    }

    window.onload = init;

     // 新增函数，用于从Android接收汉字
    function receiveCharacterFromAndroid(character) {
        loadCharacter(character);
    }


</script>
</body>
</html>

在Android中调用

        webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        webView.loadUrl( "file:///android_asset/hanziwriter1.html")
        webView.postDelayed({
            Log.i("AAAA","加载汉字----")
            loadCharacterFromAndroid("慕")
            webView.evaluateJavascript(
                "startQuiz()", null
            )
        }, 500)

Js回调。

    private class JavaScriptInterface(private val context: Context) {
        @JavascriptInterface
        fun onMistake(data: String) {
            Log.i("AAAAA","onMistake: $data")
            val jsonObject = JSONObject(data)
            val character = jsonObject.getString("character")
            val drawPath = jsonObject.getString("drawnPath") //使用 drawPath对比圈画区域是否重叠
            val jsonPath = JSONObject(drawPath)
            val pathString = jsonPath.getString("pathString")
            val strPoint = StringBuilder()
            jsonPath.getJSONArray("points").let {
                for (i in 0 until it.length()) {
                    val jsonObject = it.getJSONObject(i)
                    val x = jsonObject.getDouble("x")
                    val y = jsonObject.getDouble("y")
                    strPoint.append("$x,$y ")
                }
            }

            val totalMistakes = jsonObject.getInt("totalMistakes")
            val strokeNum = jsonObject.getInt("strokeNum") + totalMistakes
            val mistakesOnStroke = jsonObject.getInt("mistakesOnStroke")
            val strokesRemaining = jsonObject.getInt("strokesRemaining")
            uiThread {
                if (context is MainActivity) {
                    context.takeBitmap()
                    context.updateTextView("当前汉字：$character, 一共写了${strokeNum}笔, 错误笔顺${totalMistakes}笔, 剩余笔顺${strokesRemaining}笔")
                    context.drawSVGImage(pathString, strPoint.toString())
                }
            }

        }

        @JavascriptInterface
        fun onCorrectStroke(data: String) {
            Log.i("AAAAA","-onCorrectStroke: $data")
            val jsonObject = JSONObject(data)
            val character = jsonObject.getString("character")
            val drawPath = jsonObject.getString("drawnPath")//使用 drawnPath对比圈画区域是否重叠
            val jsonPath = JSONObject(drawPath)
            val pathString = jsonPath.getString("pathString")
            val strPoint = StringBuilder()
            jsonPath.getJSONArray("points").let {
                for (i in 0 until it.length()) {
                    val jsonObject = it.getJSONObject(i)
                    val x = jsonObject.getDouble("x")
                    val y = jsonObject.getDouble("y")
                    strPoint.append("$x,$y,")
                }
            }

            val totalMistakes = jsonObject.getInt("totalMistakes")
            val strokeNum = jsonObject.getInt("strokeNum") + totalMistakes
            val mistakesOnStroke = jsonObject.getInt("mistakesOnStroke")
            val strokesRemaining = jsonObject.getInt("strokesRemaining")
            uiThread {
                if (context is MainActivity) {
                    context.takeBitmap()
                    context.updateTextView("当前汉字：$character, 一共写了${strokeNum}笔, 错误笔顺${totalMistakes}笔, 剩余笔顺${strokesRemaining}笔")
                    context.drawSVGImage(pathString, strPoint.toString())
                }
            }

        }

        @JavascriptInterface
        fun onComplete(data: String) {
            Log.i("AAAAA","onComplete: $data")
            val jsonObject = JSONObject(data)
            val character = jsonObject.getString("character")

            if (context is MainActivity) {
                context.updateTextView("当前汉字：$character， 笔顺完成")
            }
        }
    }

HanziWriter官方API

1.创建新HanziWriter实例需要传入目标 div（ID 或 DOM 引用）、要呈现的字符以及配置选项。下面是一个简单的示例。在 Javascript 中：

     function loadCharacter(character) {
            clearCharacter()
            writer = HanziWriter.create('target', character, {
                width: 300,
                height: 300,
                showOutline: true,
                showCharacter: false,
                drawingColor:'#168F80',
                drawingWidth:30,
            });
            writer.quiz({
                  onMistake: function(strokeData) {
                    AndroidInterface.onMistake(JSON.stringify(strokeData));
                  },
                  onCorrectStroke: function(strokeData) {
                    AndroidInterface.onCorrectStroke(JSON.stringify(strokeData));
                  },
                  onComplete: function(summaryData) {
                    AndroidInterface.onComplete(JSON.stringify(summaryData));
                  }
               });
        }

可以看到一下结果

2.创建 HanziWriter 实例后，您可以通过调用 animateCharacter()方法为其设置动画。

 function animateCharacter() {
            if (writer) {
               writer.animateCharacter({
               AndroidInterface.start());
               });
            }
        }

3.除了动画和测验的核心功能外，还有其他几种方法可用于控制角色的渲染。

writer.setCharacter(newCharacter) 加载新角色并重新渲染。
writer.showCharacter() 如果角色当前处于隐藏状态，则显示该角色
writer.hideCharacter() 如果当前显示该角色，则隐藏该角色
writer.showOutline() 如果字符轮廓当前处于隐藏状态，则显示该轮廓
writer.hideOutline() 如果当前显示字符轮廓，则隐藏它
writer.updateColor(colorName, newValue) 更改任意颜色选项的值。例如：writer.updateColor('strokeColor', '#AA12CD')
writer.cancelQuiz() 立即取消当前正在进行的测验

4.options包含其他配置选项的对象。可用的完整选项包括：

showOutline:布尔值，默认为 true。控制在第一次渲染时是否显示或隐藏轮廓。
showCharacter:布尔值，默认为 true。控制在第一次渲染时是否显示或隐藏字符。
width:数字。画布的宽度（以 px 为单位）。
height:数字。画布的高度（以 px 为单位）。
padding:数字，默认值为 20。字符和画布边缘之间的填充（单位为 px）。
strokeAnimationSpeed:数字，默认为 1。绘制每个笔触的速度必须大于 0。增加此数字可加快绘制笔触的速度，减少此数字可减慢绘制笔触的速度。
strokeHighlightSpeed:数字，默认为 2。在测验中给出提示时突出显示每个笔画的速度必须大于 0。增加此数字可加快突出显示速度，减少此数字可减慢突出显示速度。
strokeFadeDuration:数字，默认为 400。调用和隐藏笔画之间的转换时间（以毫秒为单位writer.show()）writer.hide()
delayBetweenStrokes:数字，默认为 1000。动画时每次描边之间的时间（以毫秒为单位）。
delayBetweenLoops:数字，默认为 2000。循环动画时，每个动画循环之间的时间（以毫秒为单位）。
strokeColor:十六进制字符串，默认为“#555”。绘制每条笔画的颜色。
radicalColor:十六进制字符串，默认为 null。如果存在部首数据，则在笔画中绘制部首的颜色。如果未设置，部首将以与其他笔画相同的颜色绘制。
highlightColor:十六进制字符串，默认为“#AAF”。测验中用于突出显示的颜色。
outlineColor:十六进制字符串，默认为“#DDD”。字符轮廓的颜色。
drawingColor:十六进制字符串，默认为 '#333'。用户在测验期间绘制的线条的颜色。
drawingWidth:数字，默认4。用户在答题时绘制的线条宽度，单位为px。
showHintAfterMisses:整数，默认为 3。在向用户提供笔画高亮提示之前未完成的次数。设置为 false 以禁用。创建测验时也可以设置此项。
markStrokeCorrectAfterMisses:整数，默认禁用。强制将笔画标记为正确之前的未命中次数。这也可以在创建测验时设置。
quizStartStrokeNum:整数，默认为 0。可将此设置为从第一个笔划以外的笔划开始测验。也可在创建测验时设置。
acceptBackwardsStrokes:布尔值，默认 false。允许在测验期间向后绘制笔画。这也可以在创建测验时设置。
highlightOnComplete:布尔值，默认为 true。控制测验在用户完成绘制整个角色时是否短暂突出显示该角色。这也可以在创建测验时设置。
highlightCompleteColor:十六进制字符串，默认为 null。在测验中突出显示完成的字符时使用的颜色。如果未设置，highlightColor则将改为使用。仅当 时才highlightOnComplete相关true。
charDataLoader:函数。自定义函数用于加载字符数据。有关用法的更多信息，请参阅“加载字符数据”部分。
onLoadCharDataSuccess:函数。角色数据加载成功时的回调。此函数使用已加载的数据进行调用。这可用于实现加载微调器。
onLoadCharDataError:函数。字符数据加载失败时的回调。无论失败原因是什么，都会从charDataLoader传递此函数。
renderer:字符串，默认为“svg”。将其设置为“canvas”以使用 2d 画布而不是 SVG 进行渲染。在某些设备上可能会有更好的性能。

附上我的githubdemo地址。

PS：HanziWriter地址

github地址