HanziWriterCanvas — HanziWriter 画布封装
文件: web/src/modules/write/components/HanziWriterCanvas.vue
职责
HanziWriter 库的 Vue 3 封装，支持描红（quiz）和演示（animate）两种模式。处理画布生命周期、数据加载、模式切换。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
char | string | (必填) | 汉字字符 |
mode | string | "animate" | 模式："animate" 或 "quiz" |
showHintAfterMisses | number | boolean | false | 描红模式下错误几次后提示 |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
load-success | data | 笔顺数据加载成功 |
load-error | err | 笔顺数据加载失败 |
correct-stroke | - | 单笔正确（quiz 模式） |
mistake | strokeData | 书写错误（quiz 模式） |
complete | summaryData | 描红完成（quiz 模式） |
暴露方法
| 方法 | 说明 |
|---|---|
animateCharacter(options) | 播放笔顺动画 |
cancelQuiz() | 取消描红练习 |
startQuiz() | 开始描红练习 |
showOutline() | 显示轮廓 |
hideOutline() | 隐藏轮廓 |
showCharacter() | 显示完整汉字 |
hideCharacter() | 隐藏汉字 |
initWriter() | 初始化 HanziWriter 实例 |
resetAndRestartQuiz() | 原子化重置描红：cancelQuiz → showOutline → startQuiz |
resetToOutline() | 隐藏汉字 + 显示轮廓 |
HanziWriter 配置
| 配置项 | 值 | 说明 |
|---|---|---|
width/height | 240 | 画布尺寸 |
padding | 20 | 内边距 |
strokeColor | #3b82f6 | 笔画颜色 |
outlineColor | #e5e7eb | 轮廓颜色 |
highlightColor | #3b82f6 | 高亮颜色 |
drawingColor | #1f2937 | 描红绘制颜色 |
radicalColor | #6366f1 | 部首颜色 |
strokeAnimationSpeed | 1 | 动画速度 |
strokeFadeDuration | 0 | 笔画淡出时长 |
delayBetweenStrokes | 300 | 笔画间延迟 |
drawingWidth | 24 | 描红绘制宽度 |
数据加载
- 通过
resource-service.ts的getHanziWriterData()加载 - 加载中显示
t-loading组件 - char 变化时销毁旧实例并重建
- mode 变化时通过
setCharacter()重置而非重建
生命周期
onMounted: 初始化 HanziWriterwatch char: 销毁旧实例 → 清空画布 → 重新初始化watch mode: 通过setCharacter()重置状态onBeforeUnmount: 取消描红 → 清空画布 → 销毁实例