初始化项目
创建vue项目
npm init vue@latest
选择以下进行安装
安装依赖并启动项目
安装插件
在项目中安装插件
npm install hanzi-writer
修改HomeView.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>
<div class="text">测试</div>
<div
class="text-card"
id="text-card"
></div>
</template>
参数
<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,//间距
showCharacter: false, //不显示汉字
showOutline: true, //开启动画时，是否显示字
// radicalColor: "#168F16", // 对偏旁部首着色
strokeColor: "#000000", //全部着色 这里的颜色只能是16进制的，学英文不显示字
strokeAnimationSpeed: 5, // 5x normal speed 整个动画的速度
delayBetweenStrokes: 600, //每一笔之间动画的间隔时间，数字越大，间隔时间越长
onLoadCharDataSuccess: function (data) {
//加载汉字成功的回调
console.log("Success!", data);
},
onLoadCharDataError: function (reason) {
// 加载汉字失败的回调
console.log("Oh No! Something went wrong :(");
}
});
};
onMounted(() => {
// 实例化
initWeiter();
});
</script>
<template>
<div class="text">测试</div>
<div class="text-card" id="text-card"></div>
</template>
绘制
<script setup>
// 引入插件
import HanziWriter from "hanzi-writer";
import { nextTick, onMounted, ref } from "vue";
// 创建变量
let writer = ref(null);
const initWeiter = () => {
// 实例化
writer.value = HanziWriter.create("text-card", "外", {
width: 100, // 宽度
height: 100, //高度
padding: 5, //间距
showCharacter: false, //不显示汉字
showOutline: true, //开启动画时，是否显示字
// radicalColor: "#168F16", // 对偏旁部首着色
strokeColor: "#000000", //全部着色 这里的颜色只能是16进制的，学英文不显示字
strokeAnimationSpeed: 5, // 5x normal speed 整个动画的速度
delayBetweenStrokes: 600, //每一笔之间动画的间隔时间，数字越大，间隔时间越长
onLoadCharDataSuccess: function (data) {
//加载汉字成功的回调
console.log("Success!", data);
},
onLoadCharDataError: function (reason) {
// 加载汉字失败的回调
console.log("Oh No! Something went wrong :(");
}
});
};
// 绘制动画
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
<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>
<template>
<div class="text">测试</div>
<div class="text-card" id="text-card"></div>
</template>
更多效果请查看 hanziwriter.org/cn/docs.htm…
