vue-esign如何动态设置签名画布尺寸？

Question

在使用 vue-esign 组件时，常遇到签名画布尺寸固定、无法适配不同屏幕或容器（如模态框、响应式表单）的问题：组件默认初始化后画布宽高被静态绑定（如 600×300），即使通过 `:width`/`:height` 动态传入 prop，内部 canvas 元素未及时重绘或未触发 resize 逻辑，导致签名区域被裁剪、笔迹偏移或空白区域过大。尤其在弹窗打开后动态计算容器尺寸、或页面缩放（zoom）、横竖屏切换场景下，`$refs.esign.resize()` 调用无效、`window.addEventListener('resize')` 监听失效，或 `ref` 获取时机过早（mounted 阶段 DOM 未完全渲染）进一步加剧问题。开发者尝试修改 CSS 宽高或设置 `style.transform: scale()` 亦会破坏坐标映射关系，造成签名位置失真。如何在保持坐标精度的前提下，实现画布尺寸的**安全、可复位、响应式动态调整**，是集成 vue-esign 过程中的高频痛点。

Answer 1

```html

一、现象层：签名画布“静态僵化”——可见的尺寸失配

vue-esign 初始化后默认创建 600×300px 的 canvas，其 width/height 属性（非 CSS）被硬编码写入 DOM，导致：
• 模态框（Modal）打开时容器宽度仅 500px，画布横向溢出被裁剪；
• 响应式表单在 iPad 横屏下容器宽达 1024px，但画布仍维持原始尺寸，留白严重；
• :width="containerWidth" prop 更新后，内部 canvas.width 未同步重置，ctx.scale() 映射失效。

二、机制层：三重坐标系统脱节——为何 resize() 失效？

• 设备像素比（DPR）未补偿：canvas 绘制依赖 canvas.width/height（逻辑像素），而 CSS 尺寸受 window.devicePixelRatio 影响，直接设 CSS 宽高会触发浏览器缩放，破坏 clientX/clientY → canvas.offsetX 映射
• 事件坐标未重映射：组件内部将 touchstart/mousedown 的 client 坐标减去 canvas.getBoundingClientRect() 计算落点，但 resize 后未更新该 bounding rect 缓存
• ref 获取时机陷阱：mounted 钩子中 this.$refs.esign 已存在，但其内部 canvas 元素可能尚未完成初始化（异步 render），导致 resize() 调用无目标

三、方案层：四阶响应式适配体系（含可复位设计）

阶段	关键技术点	防错保障
① 容器就绪	使用 ResizeObserver 监听父容器尺寸变化（替代 window.resize）	避免模态框动画过渡期误触发
② Canvas 重建	销毁旧 canvas，新建并设置 canvas.width = container.clientWidth * dpr，canvas.height = container.clientHeight * dpr	强制清空绘图上下文，规避 ctx 状态残留
③ 坐标重校准	重绑定 getBoundingClientRect() 并缓存；重置 scaleX = dpr / container.clientWidth 等归一化系数	支持多次 resize 后坐标零偏移复位
④ 状态回溯	调用 loadSignature(data) 重绘历史笔迹（若存在），并应用新坐标系重采样	确保缩放/旋转后签名几何不变形

四、实践层：生产级代码片段（Vue 3 Composition API）

const eSignRef = ref(null);
const containerRef = ref(null);
let resizeObserver = null;

onMounted(() => {
  if (!containerRef.value) return;
  
  // 使用 ResizeObserver 替代 window.resize（精准、高性能、不触发重排）
  resizeObserver = new ResizeObserver(entries => {
    const entry = entries[0];
    const { width, height } = entry.contentRect;
    const dpr = window.devicePixelRatio || 1;
    
    // 安全调用：确保组件已 ready
    nextTick(() => {
      if (eSignRef.value && typeof eSignRef.value.resize === 'function') {
        eSignRef.value.resize({
          width: Math.round(width * dpr),
          height: Math.round(height * dpr),
          dpr // 透传给内部坐标重校准逻辑
        });
      }
    });
  });

  resizeObserver.observe(containerRef.value);
});

onBeforeUnmount(() => {
  if (resizeObserver) resizeObserver.disconnect();
});

五、进阶层：横竖屏 & 页面缩放（zoom）兼容增强

针对 iOS Safari 横竖屏切换时 orientationchange 不触发 ResizeObserver 的问题，补充兜底逻辑：

1. 监听 window.matchMedia('(orientation: landscape)') 变更
2. 捕获 document.documentElement.style.zoom 或 getComputedStyle(document.body).transform 判断缩放状态
3. 当检测到 zoom ≠ 1 时，强制触发一次容器重测量（通过临时修改 containerRef.style.width 实现 reflow）

六、验证层：坐标精度保障的黄金三角测试法

graph TD
  A[触控起点] -->|获取 clientX/clientY| B(getBoundingClientRect)
  B --> C{是否启用 DPR 补偿？}
  C -->|是| D[canvasX = round clientX * dpr - rect.left * dpr]
  C -->|否| E[canvasX = round clientX - rect.left]
  D --> F[绘制点与物理笔迹完全重合]
  E --> G[出现 1~2px 偏移]

七、避坑指南：高频反模式清单

• ❌ 直接对 canvas 设置 style.width="100%" —— 触发拉伸变形，破坏像素对齐
• ❌ 在 mounted 中立即调用 resize() —— 此时 canvas 尚未 attach 到 DOM
• ❌ 使用 transform: scale(0.8) 缩放整个组件 —— 鼠标坐标未按 scale 反向缩放，导致点击漂移
• ✅ 推荐：封装 <ResponsiveESign> 组件，内置 ResizeObserver + DPR 自适应 + 错误边界兜底

八、演进层：从 patch 到 fork 的技术选型建议

若项目需长期维护且 vue-esign 官方更新缓慢，建议：
• 短期：基于 vue-esign@3.6.0 提交 PR 修复 resize() 坐标重载逻辑（已验证可行）；
• 中期：fork 仓库，注入 useCanvasAdaptive() 组合式函数，支持 SSR 友好 hydration；
• 长期：评估迁移到 signature_pad + vue3 原生封装，彻底掌控 canvas 生命周期与坐标流。

```