vue-sign-canvas v2 重构历程：基于 Vue 2 签名板实现 Vue 3 与 TypeScript 组件库升级

vue-sign-canvas 组件从 Vue 2 升级到 Vue 3 的过程并非简单迁移，而是通过技术重构解决了触点偏移、空签名校验等核心痛点，使签名功能更符合实际业务需求。

为什么要做一次不兼容升级

签名组件在实际应用中需要应对多种复杂场景：

1. 表单提交前必须验证签名真实性
2. 支持已有签名回显并允许二次编辑
3. 确保跨设备触点定位准确
4. 保持高清屏幕导出清晰度
5. 提供撤销/重做操作支持
6. 支持背景模板和临摹功能
7. 解决JPEG导出透明区域问题
8. 完善TypeScript类型支持

技术栈升级

新版采用现代化技术方案：

1. Vue 3框架
2. TypeScript语言
3. Vite构建工具
4. Pointer Events事件处理
5. ESM/UMD双模式输出
6. 完整的类型声明文件

Vue 2项目如需使用，请安装旧版：

npm i sign-canvas@1

组件结构调整

重构后的代码结构更清晰：

1. constants.ts统一管理配置项
2. useSignCanvas.ts处理组件状态
3. utils/canvas.ts负责绘制相关功能
4. index.vue专注视图层逻辑

输入事件：统一 PC 和移动端

通过Pointer Events标准化输入处理，结合DPR计算确保定位精准。

空签名判断

严格区分用户签名与辅助图层：

1. 手写笔迹计入签名状态
2. 回显内容视为有效签名
3. 背景元素不影响签名判断

回显后继续编辑

新增fromDataURL()方法支持签名回显：

await signCanvasRef.value?.fromDataURL(base64);

撤销和重做

优化历史记录存储方式：

signCanvasRef.value?.undo();
signCanvasRef.value?.redo();

支持快捷键操作：

1. Ctrl/Command+Z撤销
2. Ctrl/Command+Y重做
3. Ctrl/Command+Shift+Z重做

背景图合成

支持合同模板等业务场景：

const options = {
  backgroundImage: contractBase64,
  backgroundImageFit: 'cover',
  backgroundImageOpacity: 1
};

描写和临摹

新增引导层功能：

const options = {
  guideEnabled: true,
  guideText: '张三',
  guideFont: '700 96px serif',
  guideTextColor: '#101010',
  guideTextOpacity: 0.16
};

导出旋转

支持多角度导出：

const options = {
  exportRotate: 90
};

JPEG 白底导出

解决透明背景问题：

const options = {
  imgType: 'jpeg',
  jpegBgColor: '#fff'
};

Demo 工作台

新版演示功能更全面：

1. 跨设备预览
2. 参数实时调节
3. 导出配置
4. 操作历史

迁移建议

升级注意事项：

1. 确保项目已升级Vue 3
2. 优先使用v-model语法
3. 逐步替换兼容方法
4. 小程序需单独适配

本次升级不仅解决了技术债问题，更通过模块化设计为签名组件带来了更专业的业务支持能力，为后续功能扩展奠定了坚实基础。