基于Canvas实现的简历编辑器

基于Canvas实现的简历编辑器

大概一个月前，我发现社区老是给我推荐Canvas相关的内容，比如很多 小游戏、流程图编辑器、图片编辑器 等等各种各样的项目，不知道是不是因为我某一天点击了相关内容触发了推荐机制，还是因为现在Canvas比较火大家都在卷，本着我可以用不上但是不能不会的原则，我也花了将近一个月的时间通过Canvas实现了简历编辑器。

关于Canvas简历编辑器项目的相关文章:

• 社区老给我推Canvas，我也学习Canvas做了个简历编辑器
• Canvas图形编辑器-数据结构与History(undo/redo)
• Canvas图形编辑器-我的剪贴板里究竟有什么数据
• Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
• Canvas简历编辑器-Monorepo+Rspack工程实践

为什么要自行实现一个简历编辑器：

1. 固定模版不好用，各种模版用起来细节上并不是很满意，要么是模块的位置固定，要么是页面边距不满意，而通过Canvas实现的简历编辑器都是图形，完全依靠画布绘制图形，在给定的基础图形上可以任意绘制，不会有排版问题。
2. 数据安全不能保证，因为简历上通常会存在很多个人信息，例如电话、邮箱等等，这些简历网站通常都需要登录才能用，数据都存在服务端，虽然泄漏的可能性不大，但是保护隐私还是很重要的，此编辑器是纯前端项目，数据全部存储在本地，没有任何服务器上传行为，可以完全保证数据安全。
3. 维持一页简历不易，之前使用某简历模版网站时，某一项写的字较多时导出就会出现多页的情况，而我们大家大概都听说过简历最好是一页，所以在实现此编辑器时是直接通过排版的方式生成PDF ，所以在设置页面大小后，导出的PDF总会是保持一页，看起来会更美观。

背景

我是有个基于DOM实现的简历编辑器项目的，因为暂时找不到可以用Canvas实现的比较有意思的场景，所以才选择了继续做简历编辑器，最开始做简历编辑器就是因为很多简历网站都是要开会员的，要不就是简历的自定义程度比较差，达不到我想要的效果，在学校的某一个晚上突发奇想于是自己做了一个出来。

因为是本着学习的态度以及对技术的好奇心来做的，所以除了一些工具类的包例如 ArcoDesign、ResizeObserve、Jest 等包之外，关于 数据结构packages/delta、插件化packages/plugin、核心模块packages/core 等都是手动实现的。实际