vue3使用hanzi-writer

# hanzi-writer笔画插件

### 初始化项目

创建vue项目

```bash
npm init vue@latest
```

选择以下进行安装

![image](http://banmag.cn:8089/i/2024/07/15/669478a563571.png)

安装依赖并启动项目

![image](http://banmag.cn:8089/i/2024/07/15/669478a800904.png)

### 安装插件

在项目中安装插件

```bash
npm install hanzi-writer
```

修改`HomeView.vue`文件

### 基本使用

```vue
<script setup>

// 引入插件
import HanziWriter from 'hanzi-writer';
import { onMounted, ref } from 'vue';

// 创建变量
let writer = ref(null);

const initWeiter = () => {
  // 实例化
  writer.value = HanziWriter.create("text-card", "外", {
    width: 100,
    height: 100,
    padding: 5,
    showOutline: true
  })

}

onMounted(() => {
   // 实例化
   initWeiter()
})

</script>

</template>

```

![image](http://banmag.cn:8089/i/2024/07/15/669478b55d53f.png)

### 参数

```vue
<script setup>
  // 引入插件
  import HanziWriter from "hanzi-writer";
  import { onMounted, ref } from "vue";

// 创建变量
  let writer = ref(null);

onMounted(() => {
    // 实例化
    initWeiter();
  });
</script>

```

![image](http://banmag.cn:8089/i/2024/07/15/669478b643000.png)

### 绘制

![recording](http://banmag.cn:8089/i/2024/07/15/669478b73f78c.gif)

```vue
<script setup>
  // 引入插件
  import HanziWriter from "hanzi-writer";
  import { nextTick, onMounted, ref } from "vue";

// 创建变量
  let writer = ref(null);

// 绘制动画
  const animateStroke = () => {
    // 绘制某一步的笔画
    writer.value?.animateStroke(0);
  };

// 绘制整个文字
  const drawTheWhole = () => {
    writer.value?.animateCharacter({
      onComplete: function () {
        //动画结束的回调
        console.log("动画结束");
      }
    });
  };
  // 步数
  let step = ref(0);

// 分布绘制
  const drawStepByStep = () => {
    writer.value?.animateStroke(step.value);
    step.value++;
  };

onMounted(() => {
    // 实例化
    initWeiter();
  });
</script>

<template>
  <div class="text">测试</div>
  <div class="operateRow">
    <button @click="animateStroke">绘制第一笔</button>
    <button @click="drawTheWhole">整体绘制</button>
    <button @click="drawStepByStep">分布绘制</button>
  </div>
  <div class="text-card" id="text-card"></div>
</template>

```

### **原生汉字 SVG**

![image](http://banmag.cn:8089/i/2024/07/15/669478b85c290.png)

```vue
<script setup>
  // 引入插件
  import HanziWriter from "hanzi-writer";
  import { nextTick, onMounted, ref } from "vue";

// 创建变量
  let writer = ref(null);

const initWeiter = () => {
    // 从 Hanzi Writer CDN 加载原始字符数据。 加载完成时返回 promise 的 resolves。
    HanziWriter.loadCharacterData("繁").then(function (charData) {
      // charData 是文字的每步笔画的数据

// 绘制的目标
      let target = document.getElementById("text-card");
      for (let i = 0; i < charData.strokes.length; i++) {
        // 获取需要绘制的步数
        let strokesPortion = charData.strokes.slice(0, i + 1);
        renderFanningStrokes(target, strokesPortion);
      }
    });
  };
  // 开始逐步绘制
  const renderFanningStrokes = (target, strokes) => {
    // 创建svg
    let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.style.width = "75px";
    svg.style.height = "75px";
    svg.style.border = "1px solid #EEE"; // 文字的边框
    svg.style.marginRight = "3px"; //右侧的间距
    // 目标元素插入svg元素
    target.appendChild(svg);

// 创建svg中的g 元素
    let group = document.createElementNS("http://www.w3.org/2000/svg", "g");

// 设置 g 元素的变换属性，使字符以 75x75 的比例呈现
    let transformData = HanziWriter.getScalingTransform(75, 75);
    group.setAttributeNS(null, "transform", transformData.transform);
    svg.appendChild(group);

strokes.forEach(function (strokePath) {
      // 绘制路线
      let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
      path.setAttributeNS(null, "d", strokePath);
      // style the character paths
      path.style.fill = "#555";
      group.appendChild(path);
    });
  };

onMounted(() => {
    // 实例化
    initWeiter();
  });
</script>

```

‍

更多效果请查看 https://hanziwriter.org/cn/docs.html