序，万般皆是命，半点不由人。
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地址。
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
