2万块建一个网站贵吗,长沙seo推广营销,南阳网站优化软件,湘潭做网站找磐石网络一流序#xff0c;万般皆是命#xff0c;半点不由人。
Hanzi Writer 是 javascript 免费开源库#xff0c;根据汉字书写时按照笔画顺序的特征#xff0c;可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写…序万般皆是命半点不由人。
Hanzi Writer 是 javascript 免费开源库根据汉字书写时按照笔画顺序的特征可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写汉字。
特点
丰富性: 包含9000个常用汉字的笔画数据覆盖广泛。准确性: 笔画轨迹详细且精准模拟真实书写体验。开放源代码: 全面免费可自由使用和扩展鼓励社区参与和贡献。易用性: 提供简洁的JSON格式数据易于集成到各类开发环境中。跨平台兼容: 数据基于SVG标准能在多种设备和浏览器上无缝运行。体积小Hanzi Writer 库仅仅 30 kb 压缩后仅 9kb!, 所以添加它不会使网页体积增大。用处广泛Hanzi Writer 使用 javascript, HTML5 and SVG, 所以它几乎能嵌入到任何平台应用, iOS 应用、安卓应用、桌面端应用和网页。
在Android中使用我使用的是加载WebView。
写一个html的引用地址在定义几个和我们安卓交互的方法。
!DOCTYPE html
html
headmeta charsetutf-8titleHanzi Writer/titlescript srcfile:///android_asset/js/hanzi-writer3.js/scriptscript srcfile:///android_asset/js/polyfill.min.js/scriptstylebody, 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 idtarget/div
scriptlet 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实例需要传入目标 divID 或 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地址。
PSHanziWriter地址
github地址
