Browse Source

修复手机签名时坐标偏移的问题,确保画布尺寸与显示尺寸一致

master
Default User 3 days ago
parent
commit
5d00693991
  1. 28
      certificate.html

28
certificate.html

@ -774,6 +774,9 @@
// 初始化主画布 // 初始化主画布
canvas = document.getElementById('signatureCanvas'); canvas = document.getElementById('signatureCanvas');
if (canvas) { if (canvas) {
// 确保画布的实际尺寸与显示尺寸一致
resizeCanvas(canvas);
ctx = canvas.getContext('2d'); ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000'; ctx.strokeStyle = '#000';
ctx.lineWidth = 2; ctx.lineWidth = 2;
@ -786,6 +789,12 @@
// 初始化弹窗画布 // 初始化弹窗画布
initModalSignatureCanvas(); initModalSignatureCanvas();
// 监听窗口大小变化,重新调整画布尺寸
window.addEventListener('resize', function() {
if (canvas) resizeCanvas(canvas);
if (modalCanvas) resizeCanvas(modalCanvas);
});
} }
// 初始化弹窗签名画布 // 初始化弹窗签名画布
@ -793,6 +802,9 @@
modalCanvas = document.getElementById('signatureModalCanvas'); modalCanvas = document.getElementById('signatureModalCanvas');
if (!modalCanvas) return; if (!modalCanvas) return;
// 确保画布的实际尺寸与显示尺寸一致
resizeCanvas(modalCanvas);
modalCtx = modalCanvas.getContext('2d'); modalCtx = modalCanvas.getContext('2d');
modalCtx.strokeStyle = '#000'; modalCtx.strokeStyle = '#000';
modalCtx.lineWidth = 3; // 弹窗中使用更粗的线条 modalCtx.lineWidth = 3; // 弹窗中使用更粗的线条
@ -814,15 +826,25 @@
modalCanvas.addEventListener('touchend', stopModalDrawing); modalCanvas.addEventListener('touchend', stopModalDrawing);
} }
// 调整画布尺寸,确保实际尺寸与显示尺寸一致
function resizeCanvas(canvas) {
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
}
// 打开签名弹窗 // 打开签名弹窗
function openSignatureModal() { function openSignatureModal() {
const modal = document.getElementById('signatureModal'); const modal = document.getElementById('signatureModal');
if (modal) { if (modal) {
modal.classList.add('show'); modal.classList.add('show');
// 清除弹窗画布 // 等待弹窗完全显示后调整画布尺寸
clearModalSignature();
// 添加点击外部区域关闭弹窗的事件
setTimeout(() => { setTimeout(() => {
if (modalCanvas) {
resizeCanvas(modalCanvas);
clearModalSignature();
}
// 添加点击外部区域关闭弹窗的事件
modal.addEventListener('click', handleModalClick); modal.addEventListener('click', handleModalClick);
}, 100); }, 100);
} }

Loading…
Cancel
Save