uniapp在安卓端实现hanziWriter
uniapp实现Hanzi Writer笔画
·
最近做了一个HanziWriter的项目,这个插件是一个汉字笔画库,可以实现汉字笔画动画、书写等,非常强大,这里分享一下在uniapp中使用的一点心得。
HanziWriter官网有web端和微信小程序的版本,但是本人需要在uniapp中打包到安卓app使用,一时不知道怎么办,就把两种方法搬到uniapp项目试一试,千辛万苦调出来,显示的汉字基本都严重变型了,查了资料,估计是uniapp兼容性的原因,因为uniapp没有window这个东西,很多方法也没法使用,但是官方提供了一个renderjs,可以在视图层做一些js的事情,后来发现可以在这里做一些dom操作,于是就整了一些骚操作,下面给大家分享一下。
<template>
<!-- 在dom上绑定一个属性prop,change时触发characterWriter.initWriter,characterWriter是renderjs的模块名称 -->
<view :prop="data" :change:prop="characterWriter.initWriter"
:style="{width: size + 'px', height: size + 'px'}">
<svg xmlns="http://www.w3.org/2000/svg" class="character-svg" :width="size" :height="size"
:character="character">
</svg>
</view>
</template>
在合适的时候触发绑定属性的改变:
mounted() {
this.data = {
char: this.character,
size: this.size,
data: this.data,
}
},
在vue文件中另起一个script标签作为renderjs模块,如下:
<script module="characterWriter" lang="renderjs">
import {
HanziWriter
} from 'common/hanzi-writer.min.js';
export default {
data() {
return {
}
},
methods: {
// 绑定属性变化时会自动调用initWriter
initWriter(newValue, oldValue, ownerVm, vm) {
let dom = ownerVm.$el.getElementsByClassName('character-svg')[0];
let size = newValue.size, half = size / 2;
let writer= HanziWriter.create(dom, newValue.char, {
width: size,
height: size,
padding: 10,
strokeAnimationSpeed: 0.6,
delayBetweenStrokes: 300,
strokeColor: '#123283',
delayBetweenLoops: 2000,
charDataLoader: function(char, onComplete) {
onComplete(JSON.parse(newValue.data));
}
});
writer.loopCharacterAnimation();
},
}
}
</script>
于是就这样,把web端的HanziWriter搬到了uniapp,打包到安卓app可以正常运行,其他平台没试过不知道效果怎么样,有需要的朋友可以试试。
更多推荐
已为社区贡献1条内容
所有评论(0)