在Android上实现汉字笔顺动画效果——HanZiWriter
序，万般皆是命，半点不由人。
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) {@JavascriptInterfacefun 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") + totalMistakesval 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())}}}@JavascriptInterfacefun 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") + totalMistakesval 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())}}}@JavascriptInterfacefun 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地址
相关文章：
在Android上实现汉字笔顺动画效果——HanZiWriter
序，万般皆是命，半点不由人。 Hanzi Writer 是 javascript 免费开源库，根据汉字书写时按照笔画顺序的特征，可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写…...
黑马头条vue2.0项目实战（一）——项目初始化
1. 图标素材（iconfont简介） 制作字体图标的工具有很多，推荐使用：iconfont-阿里巴巴矢量图标库。 注册账户 创建项目 可以根据项目自定义 class 前缀 上传图标到项目 生成链接，复制 css 代码，在项目中使用…...
Unity Shader动画：用代码绘制动态视觉效果
在Unity中，Shader是运行在GPU上的小程序，用于控制顶点和像素的渲染过程。通过编写自定义Shader，开发者可以创造出各种令人惊叹的动画效果，从简单的颜色变化到复杂的流体模拟。本文将探讨如何使用Unity Shader来实现动画效果。 Sh…...
智税集成2.0生成凭证
:::info 💡 整体业务流程 从A9服务器中取数，生成列表数据，写入到对方oracle数据库中。 ::: 项目关键点 1.连接数据库 左连接连接本地SQLserver数据库、右连接要链接A9开票服务器的数据库然后设想用SQLserver 自带的外部连接来连接oracle数据…...
B4005 [GESP202406 四级] 黑白方块 【暴力枚举】【前缀和】
#include<bits/stdc.h> using namespace std; int n,m,ans,tmp; char mp[20][20]; int cheak(int a,int b,int c,int d){//a<c b<dint cnt0;//枚举矩阵中的每个点 for(int ia;i<c;i)for(int jb;j<d;j)if(mp[i][j]1) cnt;//统计黑格的个数 return 2*cnt(c-a1…...
深度学习趋同性的量化探索：以多模态学习与联合嵌入为例
深度学习趋同性的量化探索：以多模态学习与联合嵌入为例 参考文献 据说是2024年最好的人工智能论文，是否有划时代的意义？ [2405.07987] The Platonic Representation Hypothesis (arxiv.org) arxiv.org/abs/2405.07987 趋同性的量化表达 …...
决策树与随机森林：比较与应用场景分析
决策树与随机森林：比较与应用场景分析 引言 决策树和随机森林是机器学习中广泛使用的两种算法，因其简单性和强大的功能而被广泛采用。决策树是一种树形结构的决策模型，易于理解和解释。随机森林则是通过集成多棵决策树来提高预测性能的模型…...
C#用Aspose.Cells导出Excel，.NET导出Excel
ASP.NET MVC 控制器里面Action处理，下载文件，输出文件流 public async Task<ActionResult> ExportNewsAuthorFee(string deptId, DateTime? startDate, DateTime? endDate){if (startDate null){startDate DateTime.Parse(DateTime.Now.Year …...
天猫番茄品类TOP1，复购率超40%，「一颗大」如何策划极致产品力？
桔子要买什么品牌？桃子买什么品牌？土豆买什么品牌？过去人们购买农产品几乎没有品牌意识。但近年来可能某些人买猕猴桃时会考虑佳沛，这是一个在全球达到30%猕猴桃市场的新西兰品牌。与此类似，一个国产品牌「一颗大™」正…...
Docker搭建私有仓库harbor（docker 镜像仓库搭建）
Harbor介绍 Docker容器应用的开发和运行离不开可靠的镜像管理，虽然Docker官方也提供了公共的镜像仓库，但是从安全和效率等方面考虑，部署我们私有环境内的Registry也是非常必要的。Harbor是由VMware公司开源的企业级的Docker Registry管理项目…...
面试题：MySQL 索引
1. 谈一下你对于MySQL索引的理解？（为什么MySQL要选择B+树来存储索引） MySQL的索引选择B+树作为数据结构来进行存储，使用B+树的本质原因在于可以减少IO次数，提高查询的效率，简单来说就是可以保证在树的高度不变的情况下存储更多的数据： IO效率的提高：在MySQL数据库中，…...
云计算day13
一、Git 概述 Git 是一种分布式版本控制系统，用于跟踪和管理代码的变更。它是由 Linus Torvalds 创建的，最初被设计用于 Linux 内核的开发。Git 允许开发 人员跟踪和管理代码的版本，并且可以在不同的开发人员之间进行协作。 Github 用的就…...
2024年孝感中级职称报名开始了吗？
2024年孝感中级职称申报终于开始了，之前参加过水测的小伙伴们，开始准备评审了 2024年孝感本批次申报时间：中级、初级职称网上申报时间:2024年8月1日至8月31日。 注意：个人通过“湖北省职称评审管理信息系统”申报，须先…...
RAG技术之Router
Router有什么用？ 在RAG应用中，Router可以帮助我们基于用户的查询意图来决定使用何种数据类型或数据源，比如是否需要进行语义检索、是否需要进行text2sql查询，是否需要用function call来进行API调用。 Router也可以根据用户的查询…...
linux系统通过修改sudo文件使普通用户拥有类似root用户权限
说明：普通用户要想拥有root权限，如果不在sudo文件里配置就算把该用户加到wheel组（root用户所在的组）也不行。 要想通过在命令前加上sudo使得该用户以root权限执行命令，需要修改/etc/sudoers文件。 （如果通…...
基于PyCharm在Windows系统上远程连接Linux服务器中Docker容器进行Python项目开发与部署
文章目录 摘要项目结构项目开发项目上线参考文章 摘要 本文介绍了如何在Windows 10系统上使用PyCharm专业版2024.1，通过Docker容器在阿里云CentOS 7.9服务器上进行Python项目的开发和生产部署。文章详细阐述了项目结构的搭建、PyCharm的使用技巧、以及如何将开发项…...
TypeScript学习篇-类型介绍使用、ts相关面试题
文章目录 基础知识基础类型: number, string, boolean, object, array, undefined, void(代表该函数没有返回值)enum(枚举): 定义一个可枚举的对象typeinterface联合类型: |交叉类型: &any 类型null 和 undefinednullundefined never类型 面试题及实战1. 你觉得使用ts的好处…...
超详细！Jmeter性能测试
前言 性能测试是一个全栈工程师/架构师必会的技能之一，只有学会性能测试，才能根据得到的测试报告进行分析，找到系统性能的瓶颈所在，而这也是优化架构设计中重要的依据。 测试流程： 需求分析→环境搭建→测试计划→脚…...
C语言经典习题24
文件操作习题 一 编程删除从C盘home文件夹下data.txt文本文件中所读取字符串中指定的字符，该指定字符由键盘输入，并将修改后的字符串以追加方式写入到文本文件C:\home\data.txt中。 #include<stdio.h> main() { char s[100],ch; int i;…...
SQL labs-SQL注入（三，sqlmap使用）
本文仅作为学习参考使用，本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 引言： 盲注简述：是在没有回显得情况下采用的注入方式，分为布尔盲注和时间盲注。 布尔盲注：布尔仅有两种形式，ture&#…...
别再死记公式了！用Python手把手复现西瓜书3.0α数据集的对率回归（附完整代码与可视化）
从西瓜数据集到决策边界：Python实战对率回归的数学之美机器学习初学者常陷入公式推导与代码落地的断层中——明明理解了教材中的数学原理，面对实际数据集时却无从下手。本文将以周志华《机器学习》中的西瓜数据集3.0α为蓝本，用Python完整演绎…...
从集合运算到代码：一文搞懂Jaccard系数，附Python/NumPy/Pandas三种实现方法对比
从集合运算到代码：一文搞懂Jaccard系数，附Python/NumPy/Pandas三种实现方法对比在数据挖掘和机器学习领域，衡量两个集合的相似度是一项基础而重要的任务。Jaccard相似系数作为一种简单直观的度量方法，广泛应用于推荐系统、文本挖掘…...
【SpringBoot+Elasticsearch 内容搜索系统实战】：架构设计与全流程实现
🔥你好我是fengxin_rou这是我的个人主页fengxin_rou的主页 ❄️欢迎查看我的专栏我的专栏 《Java后端学习》、《JAVASE基础》、《JUC并发》、《redis》、《JVM虚拟机》、《MYSQL》、《黑马点评》、《rabbitmq》、《JavaWebAI的talis学习系统》、《苍穹外卖》 目录…...
评测全网10款主流降AI率工具:帮你锁定真正好用靠谱的一款
随着AI写作工具的普及，论文撰写和内容创作变得越来越高效，许多学生和职场人士都从中受益。然而，随着高校和学术机构对AIGC（人工智能生成内容）检测技术的不断升级，问题也逐渐显现。越来越多的学生发现&#…...
2026最新免费在线去除视频水印保姆级教程，不用下载软件一步到位！
你是不是也遇到过这种崩溃瞬间：刷到一个绝美空镜想拿来做转场，结果角落挂着硕大的平台台标；翻到一条神评论视频想分享给朋友，水印叠水印糊成一片；好不容易找到素材想剪辑个二创，却被满屏的浮动水印直接劝退…...
面向实时决策Agent的Harness微秒级调度
面向实时决策Agent的Harness微秒级调度：从原理到落地，打造低于10us延迟的智能决策系统 副标题：适配量化交易、自动驾驶、工业控制等高实时性场景，确定性延迟保障99.999%调度成功率 摘要/引言 你有没有遇到过这些场景：量化交易策略的决策逻辑晚了5us，原本可以盈利的订单…...
2026必备！AI论文工具测评：最新好用推荐与对比分析
2026年真正好用的AI论文工具，核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测，千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队，覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。一、综…...
Android App原生指令通道doCommandNative深度解析与Frida Hook实战
1. 这不是“逆向教程”，而是一次真实App通信链路的解剖现场你有没有遇到过这样的情况：在某A系头部电商App里，点击一个商品卡片，页面秒开；但用常规WebView调试或抓包工具去观察，却看不到任何明显的HTTP请求发…...
遗传算法融合线性规划：超参数调优的高效双层优化策略
1. 项目概述：当遗传算法遇上线性规划，超参数调优的新思路在机器学习项目的落地过程中，有一个环节既让人着迷又令人头疼，那就是超参数调优。模型架构的层数、神经元的数量、学习率、正则化强度……这些“旋钮”的微小转动ÿ…...
Kubernetes事件驱动架构实践：构建响应式微服务系统
Kubernetes事件驱动架构实践：构建响应式微服务系统 一、事件驱动架构概述 事件驱动架构是一种基于事件发布/订阅模式的分布式系统设计方法。在Kubernetes中实现事件驱动架构可以实现松耦合、高可扩展的微服务系统。 1.1 事件驱动模式 模式说明适用场景发布/订阅…...