学习工作 | 墨临 AI 书法临帖助手

u51043460201363 · 2026 年7 月 13 日 02:01

1. Demo 简介

墨临 AI 书法临帖助手 是一款面向零基础书法爱好者的网页版单页应用，让用户打开浏览器即可完成"选帖—读帖—摹帖—对比—评分"的一站式临帖练习。

产品形态：单文件 HTML 网页应用（无需安装，双击即用）
面向谁：零基础书法爱好者、传统文化学习者、学生群体
核心功能：
1. 六套经典字帖选帖广场：颜真卿《多宝塔碑》、欧阳询《九成宫》、柳公权《玄秘塔碑》、赵孟頫《胆巴碑》、硬笔楷书、隶书《曹全碑》，共 60 个练习字，支持难度和字体筛选
2. 动态笔画演示 + 宣纸临摹画布：基于 HanziWriter 真实笔画数据的逐笔书写动画，支持正常/慢速/暂停/重播；Canvas 毛笔临摹，支持描红模式、撤销、清空
3. 规则化智能评分系统：不是随机分，而是读取用户实际笔迹数据，从结构相似度、笔画准确度、整体气韵三个维度给出综合评分和具体改进建议

六套经典字帖，支持难度/字体筛选

原帖示范 + 动态笔画演示 + 宣纸临摹画布

规则化对比评分，不是随机分

三级学习路径 + 徽章成就系统

2. Demo 创作思路

灵感来源

我从小对书法感兴趣，但一直卡在"入门难"：字帖贵、老师少、练完没人指点。后来发现身边很多朋友也有同样的困扰——想学书法，却不知道从哪本帖开始，看不懂笔画顺序，练完更没有即时反馈。

想解决的问题

选帖难：楷书四大家（颜欧柳赵）加上隶书行书，初学者根本不知道哪个适合自己
看不懂笔顺：静态字帖看不出每一笔的起收方向，尤其"永字八法"这种经典教学模块
练完没反馈：自己写的字和原帖差在哪？结构对不对？重心偏没偏？只能靠老师当面指点
跨端字体不一致：电脑上有楷体字库，手机上打开就变成了印刷体，严重影响体验

为什么做这个方向

书法是传统文化数字化的绝佳切入点——它有明确的评判标准（重心、宽高比、笔画覆盖），适合用规则算法做评分，而非依赖 AI 黑盒。同时，"永字八法"本身就是千百年验证过的教学体系，天然适合拆解成交互式笔画演示。我选择做成单文件 HTML，是为了让评委和用户零门槛打开即用，不需要安装任何东西。

3. Demo 体验地址

已打包为 Zip 格式，下载后解压双击 HTML 文件即可体验：

墨临_AI书法临帖助手_初赛Demo.zip (29.9 KB)

也支持用 Caddy 等工具部署为在线体验链接。手机端和电脑端均可使用，已统一加载 Ma Shan Zheng 毛笔楷书 Web 字体，跨端体验一致。

4. TRAE 实践过程

整个 Demo 从创意提案到可体验版本，全部在 TRAE IDE 中通过对话完成。以下是关键开发步骤：

第一步：创意提案生成

用 TRAE 生成了创意提案 HTML、PRD 文档和技术架构文档，确定了产品定位、核心功能和数据结构。这是报名阶段的基础产物。

第二步：初赛 Demo 主体开发

在创意提案基础上，通过 TRAE 对话扩展了数据层（6 套字帖、60 个单字）、重写了评分算法（从模拟分改为基于真实笔迹特征的规则评分）、实现了 Canvas 临摹画布和 SVG 笔画动画。

关键开发截图：

第三步：动态笔画演示深度修复（核心难点）

这是整个项目最曲折的部分。初版笔画动画用的是手写贝塞尔曲线模板，和真实字形完全对不上。经过多轮迭代，最终方案是：

接入 HanziWriter 数据集：通过 HanziWriter.loadCharacterData() 异步获取 makemeahanzi 数据集的真实笔画中心线（medians），缓存到 strokeCache 避免重复请求
em-square 坐标映射：把 makemeahanzi 的 0-1024 坐标系线性映射到 SVG viewBox，与 Ma Shan Zheng 字体的 em-box 共享同一坐标系，笔画和印刷字大小自然匹配
逐笔动画驱动：重写 stepPlayer，按时间计算当前笔画索引和内部进度，驱动 stroke-dashoffset 和 .active/.done 状态切换
笔画粗细变化：用 strokeWidthByGeometry 按几何走向分配粗细——横画细（5）、竖画粗（9）、撇捺中等（6）、点钩最粗（9），遵循"永字八法"原则
数字圆圈笔序控制：把进度条改为可点击的笔画数字圆圈，点哪一笔播放哪一笔

踩过的坑（开发心得）：

scoring-path 的 opacity:0 !important 锁死了笔画可见性，导致无论如何调动画都看不到笔画——这是之前一直改不好的元凶
makemeahanzi 坐标系 y 轴向上，SVG y 轴向下，不做翻转笔画就是倒的
bbox-fit 缩放会让笔画占满整个 SVG，但字体 ink 只占 em-box 的 70-80%，所以笔画总是比字大一圈——改用 em-square 映射才解决
SVG stroke-width 是整条 path 统一的，无法做笔画内的粗细渐变（起笔重、中段轻、收笔重），只能做到笔画间粗细差异

第四步：跨端字体统一

部署到手机端后发现楷体变成了印刷体（手机没有 STKaiti）。解决方案：

引入 fontsource 的 Ma Shan Zheng（马善政毛笔楷书）Web 字体，通过 jsdelivr CDN 分片加载
把 Ma Shan Zheng 放到 fallback 链第一位，电脑端和手机端字体统一
对"趯"等特定字预加载 fontsource 切片，用 document.fonts.load() 确保 Canvas 渲染前字体就绪

第五步：练习画布正方形化 + 卡片对齐

发现临摹对比时用户字被纵向压缩。根因是练习画布是宽矮形（829x392），归一化不对称。修复：

新增正方形 .practice-frame（aspect-ratio: 1/1），画布归一化对称
copyToResult 用短边 min(width,height) 等比缩放 + 居中
练习成果卡片用 measureText 动态测量原帖字 ink 高度，让临摹字视觉高度与原帖字精确匹配

关键任务对话 Session ID

双击 TRAE 对话头像可复制 Session ID，以下为关键开发任务的对话记录：

.51043460201363:c0c1aae8660537bb07e53359b2a6bd34_6a4483d8e66b06ccf97c5266.6a448413e66b06ccf97c5268.6a448412d55a137bf9faf072:Trae CN.T(2026/7/1 11:05:55)
.51043460201363:b82532987e94b09d72929800d6051988_6a4483d8e66b06ccf97c5266.6a448f89e66b06ccf97c52d4.6a448f89d55a137bf9faf074:Trae CN.T(2026/7/1 11:54:49)
.51043460201363:9cd550e772fa981d12f0b87a8bb1e11e_6a4483d8e66b06ccf97c5266.6a47210ea87ee18a543ef06d.6a47210d0f52c77546f14182:Trae CN.T(2026/7/3 10:40:14)

5. 报名帖链接

通过的报名帖：学习工作 + 墨临 AI 书法临帖助手 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区

6. 技术亮点总结

技术点	实现方案
笔画数据	HanziWriter `loadCharacterData` + makemeahanzi medians 中心线
坐标对齐	em-square 映射（0-1024 → 166px em-box），Y 轴翻转
逐笔动画	`requestAnimationFrame` + `stroke-dashoffset` + `.active/.done` 状态
笔画粗细	`strokeWidthByGeometry` 按几何走向分配（横细竖粗）
评分算法	规则化：重心比较 + 宽高比 + 笔画覆盖区域 + 书写流畅度
跨端字体	fontsource Ma Shan Zheng 分片加载 + `document.fonts.load()`
画布归一化	正方形 `aspect-ratio: 1/1` + 等比缩放居中
数据持久化	localStorage（练习天数、已掌握字、徽章成就）

7. 开发心得

这个项目让我深刻体会到：AI 写代码不是一次到位的，而是需要多轮对话迭代。尤其是动态笔画演示，从"手写贝塞尔模板"到"接入 HanziWriter 真实数据"，从"整体擦除动画"到"逐笔 stroke-dashoffset 驱动"，从"bbox-fit 缩放"到"em-square 映射"，每一步都是在 TRAE 对话中发现问题、定位根因、迭代修复。

最关键的教训是：一定要找到真正的根因再改，否则会越改越像打补丁。比如笔画一直看不见，根因不是动画逻辑，而是 CSS 的 !important 锁死；笔画和字对不上，根因不是路径数据，而是坐标系映射方式。这些都是在 TRAE 对话中通过读代码、查文档、写探针脚本一步步定位出来的。

传统文化数字化这条路还很长，希望墨临能成为一个微小但真实的起点。