使用Signature-Pad旋转设备后，如何保留草图并正常绘制？

问题出在旋转画布后，原Signature-Pad实例的内部尺寸缓存没有更新——它还是基于旋转前的画布宽高来计算绘制坐标，导致新画的内容位置、大小都不对。

修改后的resizeCanvas函数如下，核心是重新初始化Signature-Pad实例：

function resizeCanvas() {
    // 保存当前绘制数据
    const dta = signaturePad.toData();
    const ratio = Math.max(window.devicePixelRatio || 1, 1);

    // 调整画布物理尺寸与缩放比例
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    const ctx = canvas.getContext("2d");
    ctx.scale(ratio, ratio);

    // 重新初始化SignaturePad，覆盖旧实例（带上你的自定义配置）
    signaturePad = new SignaturePad(ctx, {
        minWidth: 2,
        maxWidth: 5,
        penColor: "#000"
        // 其他你用到的配置，比如backgroundColor等
    });

    // 恢复之前的绘制内容
    signaturePad.fromData(dta);
}

为什么这样能解决问题？ #

Signature-Pad在初始化时会读取当前画布的尺寸信息并缓存，后续绘制的坐标计算都依赖这个缓存值。旋转设备后画布宽高互换，但旧实例的缓存不会自动更新。重新初始化实例后，它会基于新的画布尺寸重新计算坐标映射，这时候恢复数据再绘制，就不会出现偏移或缩放问题了。

注意事项 #

• 重新初始化时，一定要带上你之前配置的所有参数（比如笔宽、颜色、背景色），否则会重置为默认值；
• 如果你使用了fromDataURL恢复内容，同样要在重新初始化实例后调用，确保它基于新的画布尺寸解析数据。

内容的提问来源于stack exchange，提问作者Offbeatmammal