如何解决signature-pad.js签名画布响应式光标与内容矛盾问题？

1. 修复响应式适配矛盾 #

问题根源在于窗口缩放时，画布的显示尺寸与实际像素尺寸未同步，且直接循环调用signaturePad.fromData(signaturePad.toData())会导致坐标偏移。正确处理流程如下：

• 先保存当前签名数据，再调整画布实际像素尺寸（匹配容器显示尺寸+设备像素比），最后恢复签名数据
• 给resize事件添加防抖，避免频繁触发导致异常

修改后的resize处理代码：

let resizeTimeout;

function handleResize() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    // 保存当前签名数据
    const signatureData = signaturePad.toData();
    
    // 获取容器的显示尺寸
    const canvasContainer = document.getElementById('signature-pad');
    const { width, height } = canvasContainer.getBoundingClientRect();
    
    // 设置画布实际像素尺寸（适配高DPI屏幕）
    const dpr = window.devicePixelRatio || 1;
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    
    // 同步画布显示样式
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    
    // 恢复签名数据
    signaturePad.fromData(signatureData);
  }, 250); // 250ms防抖延迟，可按需调整
}

window.addEventListener('resize', handleResize);

2. 解决手机滚动时签名重置问题 #

手机滚动时签名重置，多因浏览器地址栏隐藏/显示触发resize事件，导致重复执行错误的画布调整逻辑。除上述防抖处理外，还需注意：

• 检查代码中是否存在滚动事件触发的画布误操作逻辑
• 确保signaturePad实例未被意外重新初始化

关键注意事项 #

• 禁止在resize事件中反复调用signaturePad.fromData(signaturePad.toData())，这会导致签名数据多次转换，坐标逐渐偏移
• 必须同步画布的实际像素尺寸（canvas.width/height）与显示尺寸（style.width/style.height），同时考虑设备像素比，否则会出现光标位置偏移
• 防抖是处理移动端resize频繁触发的核心手段

内容的提问来源于stack exchange，提问作者Julian W.