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

最新推荐文章于 2025-02-08 01:29:10 发布

Super 含

最新推荐文章于 2025-02-08 01:29:10 发布

阅读量1.2k

点赞数 5

文章标签： android

本文链接：https://blog.csdn.net/qq_37492806/article/details/140751640

版权

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

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) {

最低0.47元/天解锁文章