From 0aa79d28f843e9a39e4dabcf9c081df53287055e Mon Sep 17 00:00:00 2001 From: Saud Fatayerji Date: Sat, 6 May 2023 18:52:30 +0300 Subject: [PATCH] Fixed positional accuracy for signatures --- src/main/resources/templates/sign.html | 56 +++++++++++++++----------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index f8a26bf7..ffb918b3 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -109,7 +109,7 @@
- +
@@ -220,8 +220,6 @@ const x = 0; const y = 0; signatureCanvas.style.transform = `translate(${x}px, ${y}px)`; - signatureCanvas.setAttribute('data-x', x); - signatureCanvas.setAttribute('data-y', y); // calcualte the max size const containerWidth = parseInt(getComputedStyle(pdfCanvas).width.replace('px','')); @@ -274,17 +272,24 @@ }); } + function parseTransform(element) { + const tansform = element.style.transform.replace(/[^.,-\d]/g, ''); + const transformComponents = tansform.split(","); + return { + x: parseFloat(transformComponents[0]), + y: parseFloat(transformComponents[1]), + width: element.offsetWidth, + height: element.offsetHeight, + } + } interact('#signature-canvas') .draggable({ listeners: { move: (event) => { - const target = event.target; - const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; - const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; - - target.style.transform = `translate(${x}px, ${y}px)`; - target.setAttribute('data-x', x); - target.setAttribute('data-y', y); + const transform = parseTransform(event.target) + const x = (transform.x || 0) + event.dx; + const y = (transform.y || 0) + event.dy; + event.target.style.transform = `translate(${x}px, ${y}px)`; }, }, }) @@ -293,18 +298,12 @@ listeners: { move: (event) => { const target = event.target; - const x = (parseFloat(target.getAttribute('data-x')) || 0); - const y = (parseFloat(target.getAttribute('data-y')) || 0); const newWidth = event.rect.width; const newHeight = event.rect.height; - const scale = newWidth / target.width; target.style.width = newWidth + 'px'; target.style.height = newHeight + 'px'; - target.setAttribute('data-scale', scale); - - target.style.transform = `translate(${x}px, ${y}px)`; }, }, modifiers: [ @@ -333,16 +332,25 @@ const pageIndex = 0; // Choose the page index where the signature should be added (0 is the first page) const page = pdfDocModified.getPages()[pageIndex]; - const targetElement = signatureCanvas; - const x = parseFloat(targetElement.getAttribute('data-x')) || 0; - const y = parseFloat(targetElement.getAttribute('data-y')) || 0; - const scale = parseFloat(targetElement.getAttribute('data-scale')) || 1; + const signatureCanvasPositionPixels = parseTransform(signatureCanvas); + const signatureCanvasPositionRelative = { + x: signatureCanvasPositionPixels.x / pdfCanvas.offsetWidth, + y: signatureCanvasPositionPixels.y / pdfCanvas.offsetHeight, + width: signatureCanvasPositionPixels.width / pdfCanvas.offsetWidth, + height: signatureCanvasPositionPixels.height / pdfCanvas.offsetHeight, + } + const signaturePositionPdf = { + x: signatureCanvasPositionRelative.x * page.getWidth(), + y: signatureCanvasPositionRelative.y * page.getHeight(), + width: signatureCanvasPositionRelative.width * page.getWidth(), + height: signatureCanvasPositionRelative.height * page.getHeight(), + } page.drawImage(signatureImageObject, { - x: x, - y: page.getHeight() - y - (targetElement.height * scale), - width: targetElement.width * scale, - height: targetElement.height * scale, + x: signaturePositionPdf.x, + y: page.getHeight() - signaturePositionPdf.y - signaturePositionPdf.height, + width: signaturePositionPdf.width, + height: signaturePositionPdf.height, }); }