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

最新推荐文章于 2024-05-10 15:34:27 发布

乐玩程序

最新推荐文章于 2024-05-10 15:34:27 发布

阅读量1.3k

点赞数 2

分类专栏： web前端文章标签： vue.js html5 css3 javascript 前端

本文链接：https://blog.csdn.net/muzili1006/article/details/105440395

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

具体实现

**
在 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 speed
            delayBetweenStrokes: 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() : null
            resolve()
          }, 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;
  }