diff --git a/src/views/Design/components/Questions/SignQuestion.vue b/src/views/Design/components/Questions/SignQuestion.vue index 1bb6c3f..b38f508 100644 --- a/src/views/Design/components/Questions/SignQuestion.vue +++ b/src/views/Design/components/Questions/SignQuestion.vue @@ -17,7 +17,7 @@ const errorMessage = defineModel('errorMessage', { default: '' }); const isPreview = defineModel('isPreview', { default: false }); const signatureCanvas = useTemplateRef('signatureCanvas'); -const canvasWidth = ref(100); +const canvasWidth = ref(window.innerWidth * 0.8); const canvasHeight = computed(() => canvasWidth.value / 1); const isEraser = ref(false); @@ -62,15 +62,13 @@ const togglePen = () => { setPenStyle(); }; -const route = useRoute() +const route = useRoute(); onMounted(() => { // 设置页面刷新标记 sessionStorage.setItem('is_page_refresh', '1'); if (!signatureCanvas.value) return; - // 将 canvas 宽度和窗口的宽度保持一致 - canvasWidth.value = window.innerWidth - 60; // 获取 canvas 上下文 ctx = signatureCanvas.value.getContext('2d')!; @@ -196,7 +194,7 @@ let aIndex = 1; /** * 上传文件 */ -async function handleUploadImg () { +async function handleUploadImg() { // const file = new File([saveCanvas('blob')!], 'sign.png', { type: 'image/png' }); // const res = await CommonApi.cosUpload(file); // console.log(`sign upload url`, res); @@ -219,7 +217,7 @@ async function handleUploadImg () { * 当组件注销时需要保存状态,存到本地indexDB ,然后等待下次组件加载时恢复 * 但在页面刷新时不保存 */ -function saveCanvasState () { +function saveCanvasState() { if (!ctx || !signatureCanvas.value) return; const imageData = ctx.getImageData(0, 0, canvasWidth.value, canvasHeight.value); undoStack.value.push(imageData); @@ -278,7 +276,10 @@ function saveCanvasState () { const tx = db.transaction('canvasState', 'readwrite'); const store = tx.objectStore('canvasState'); // 只存储 base64 字符串,而不是 ImageData 对象 - store.put({ canvasDataUrl, currentStep: currentStep.value }, element.value.id || 'default_id'); + store.put( + { canvasDataUrl, currentStep: currentStep.value }, + element.value.id || 'default_id' + ); tx.oncomplete = () => { db.close(); }; @@ -290,13 +291,13 @@ function saveCanvasState () { onUnmounted(() => { // 当组件注销时,保存状态 saveCanvasState(); -}) +}); /** * 恢复canvas 状态 * 当组件加载时需要从localStorage恢复状态 */ -function restoreCanvasState () { +function restoreCanvasState() { // 没有 indexDB, 不恢复 if (!window.indexedDB) return; if (!ctx || !signatureCanvas.value) return; @@ -352,12 +353,12 @@ function restoreCanvasState () { onMounted(() => { // 当组件加载时,恢复状态 restoreCanvasState(); -}) +}); /** * 清除画布状态 */ -function clearCanvasState () { +function clearCanvasState() { if (window.indexedDB) { try { const request = window.indexedDB.open('canvasState', 1); @@ -386,23 +387,44 @@ window.addEventListener('beforeunload', () => {