600字范文 > Hanzi Weiter的简单应用小案例在HTML汉字的书写演示汉字笔画顺序的汉字笔画库

Hanzi Weiter的简单应用小案例在HTML汉字的书写演示汉字笔画顺序的汉字笔画库

时间：2023-12-10 01:39:27

因为业务需求,上网查询之后写的一个小 demo,参考文档/

具体实现

在 script 标签加载 Hanzi Writer

只需将以下内容放入你的网页的头部,自己的,或者从官网查看

js vue应用

watch: {form (val) {this.username = this.form.name.replace('-', '').split('')this.$nextTick(() => {/* 先开始写字 */let hanziBox = document.getElementById('name0');let box_width = hanziBox.offsetWidth, box_height = hanziBox.offsetHeight;let writerConfig = {width: box_width,height: box_height,padding: 3,showOutline: false,showCharacter: false,strokeColor: '#FF9435',//字的颜色strokeAnimationSpeed: 2, // 5x normal speeddelayBetweenStrokes: 20, // milliseconds};this.drawCharacter(0, writerConfig)})},animationQueue(){this.canvans()},},methods: {/* 文字书写方法 */drawCharacter (index = 0, config) {return new Promise(resolve => {let name = HanziWriter.create('name' + index, this.username[index], config);name.animateCharacter().then(() => {if (this.username[index + 1]) {this.drawCharacter(index + 1, config)}});})},/* 改定时器为Promise函数，方便async处理 */setTimer (callback, time = 0) {return new Promise(resolve => {setTimeout(function () {callback ? callback() : nullresolve()}, time)})},//进度条async animationFun () {const that = this;that.animationQueue+=1;setTimeout(function () {if (that.animationQueue<=2) {that.animationFun()}else {that.subBtn = true;}}, 2500)},}

HTMl部分

<div class="name-box"><div class="firstname" :id="'name'+index" v-for="(item,index) in username"></div></div>

css部分

.name-box {display: flex;flex-direction: row;justify-content: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.firstname {width: 1.2rem;height: 1.2rem;font-size: 1.06rem;font-weight: 800;}

效果