A Taro port of Hanzi Writer with same context apis
Support both h5 and mini-programs
- Added commonly-used background grids:
口
、田
、井
、回
、米
、米回
、田回
<template>
<HanziView :ref="el => elRef = el"/>
</template>
<script lang="ts">
import { HanziView, HanziWriterContext, createHanziWriterContext } from 'hanzi-view'
import { onMounted, ref } from 'vue'
import 'hanzi-view/dist/style.css'
export default defineComponent({
name: 'Index',
components: {
HanziView
},
setup () {
const elRef = ref<any>(null)
const writerCtx = ref<HanziWriterContext | null>(null)
const options = {
padding: 5,
drawingWidth: 40,
radicalColor: '#168',
strokeColor: '#555',
drawingColor: '#e05a5a',
strokeAnimationSpeed: 0.5,
delayBetweenStrokes: 50,
strokeFadeDuration: 0,
showHintAfterMisses: 1,
strokeHighlightSpeed: 0.5,
highlightColor: '#AAF'
}
onMounted(() => {
writerCtx.value = createHanziWriterContext(elRef, {
...options,
character: '福'
})
})
return {
elRef
}
}
})
</script>
Hanzi View is released under an MIT license.
Hanzi View uses Hanzi Writer and data from hanzi-writer-data, which comes from the Make Me A Hanzi project, and extracted the data from fonts by Arphic Technology, a Taiwanese font forge that released their work under a permissive license in 1999. You can redistribute and/or modify this data under the terms of the Arphic Public License as published by Arphic Technology Co., Ltd. A copy of this license can be found in ARPHICPL.TXT.