From 88a90f22a32d0dadb1f18a40752990dac246e954 Mon Sep 17 00:00:00 2001 From: Dimitrios Kaitantzidis Date: Sat, 7 Oct 2023 22:54:11 +0300 Subject: [PATCH 1/5] WIP: Adds textarea and multi line support for pdf sign. --- src/main/resources/templates/sign.html | 51 +++++++++++++++++++++++--- 1 file changed, 46 insertions(+), 5 deletions(-) diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index 683bf162..54aa5a8d 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -179,7 +179,7 @@ select#font-select, select#font-select option {
- + - + + + + + + +
@@ -196,18 +202,53 @@ select#font-select, select#font-select option { function addDraggableFromText() { const sigText = document.getElementById('sigText').value; const font = document.querySelector('select[name=font]').value; + // const fontSize = document.querySelector('select[name=size]').value; + // console.log("fontSize: " + fontSize) const fontSize = 100; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = `${fontSize}px ${font}`; - const textWidth = ctx.measureText(sigText).width; - const textHeight = fontSize; + + let yAxis = fontSize * .4; + + let paragraphs = sigText.split(/\r?\n/); + + let lengthiestParagraph = paragraphs[0]; + + for (let i = 0; i < paragraphs.length; i++) { + let previousParagraph; + let currentParagraph = paragraphs[i]; + + if (i === 0) { + previousParagraph = ''; + } else { + previousParagraph = paragraphs[i-1]; + } + + if (currentParagraph.length > previousParagraph.length) + lengthiestParagraph = currentParagraph; + + + ctx.fillText(currentParagraph, 0, yAxis, fontSize); + yAxis += fontSize * .8; + } + + console.log("lengthiest pagragraph: " + lengthiestParagraph); + + const textWidth = ctx.measureText(lengthiestParagraph).width; + // const textHeight = fontSize; + const textHeight = fontSize * 1.6; canvas.width = textWidth; canvas.height = textHeight*1.35; //for tails ctx.font = `${fontSize}px ${font}`; - ctx.fillText(sigText, 0, fontSize); + // console.log(sigText); + console.log(sigText.split(/\r?\n/)); + + + + // ctx.fillText(sigText, 0, fontSize); const dataURL = canvas.toDataURL(); DraggableUtils.createDraggableCanvasFromUrl(dataURL); From a71e813e82eb1135a239a2216b916d58e8a9eb3e Mon Sep 17 00:00:00 2001 From: Dimitrios Kaitantzidis Date: Sun, 8 Oct 2023 15:51:40 +0300 Subject: [PATCH 2/5] WIP: Makes font smaller but test is shown as whole and in multiline --- src/main/resources/templates/sign.html | 53 +++++++++----------------- 1 file changed, 18 insertions(+), 35 deletions(-) diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index 54aa5a8d..5b72dc30 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -202,50 +202,33 @@ select#font-select, select#font-select option { function addDraggableFromText() { const sigText = document.getElementById('sigText').value; const font = document.querySelector('select[name=font]').value; - // const fontSize = document.querySelector('select[name=size]').value; - // console.log("fontSize: " + fontSize) const fontSize = 100; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = `${fontSize}px ${font}`; - - let yAxis = fontSize * .4; - - let paragraphs = sigText.split(/\r?\n/); - - let lengthiestParagraph = paragraphs[0]; - - for (let i = 0; i < paragraphs.length; i++) { - let previousParagraph; - let currentParagraph = paragraphs[i]; - - if (i === 0) { - previousParagraph = ''; - } else { - previousParagraph = paragraphs[i-1]; - } - - if (currentParagraph.length > previousParagraph.length) - lengthiestParagraph = currentParagraph; - - - ctx.fillText(currentParagraph, 0, yAxis, fontSize); - yAxis += fontSize * .8; - } - - console.log("lengthiest pagragraph: " + lengthiestParagraph); - - const textWidth = ctx.measureText(lengthiestParagraph).width; - // const textHeight = fontSize; - const textHeight = fontSize * 1.6; + const textWidth = ctx.measureText(sigText).width; + const textHeight = fontSize; canvas.width = textWidth; canvas.height = textHeight*1.35; //for tails - ctx.font = `${fontSize}px ${font}`; - // console.log(sigText); - console.log(sigText.split(/\r?\n/)); + // ctx.font = `${fontSize / 2}px ${font}`; + ctx.font = `${fontSize / 2}px ${font}`; + let paragraphs = sigText.split(/\r?\n/); + ctx.textBaseline = 'top'; + + // let y = fontSize; + let y = 0; + + console.log(paragraphs); + console.log(canvas.height); + + paragraphs.forEach(paragraph => { + // ctx.letterSpacing = "50px"; + ctx.fillText(paragraph, 0, y); + y += 24; + }); // ctx.fillText(sigText, 0, fontSize); From b0f8f56650d56878a7b24c7ea420a6f2d48181a5 Mon Sep 17 00:00:00 2001 From: Dimitrios Kaitantzidis Date: Sun, 8 Oct 2023 15:58:23 +0300 Subject: [PATCH 3/5] WIP: Letters are now inside canvas, and multiline support is functional. There is a small bug where when there are a lot of multiple lines, the font gets smaller. --- src/main/resources/templates/sign.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index 5b72dc30..7584a72b 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -210,12 +210,14 @@ select#font-select, select#font-select option { const textWidth = ctx.measureText(sigText).width; const textHeight = fontSize; - canvas.width = textWidth; - canvas.height = textHeight*1.35; //for tails - // ctx.font = `${fontSize / 2}px ${font}`; - ctx.font = `${fontSize / 2}px ${font}`; let paragraphs = sigText.split(/\r?\n/); + canvas.width = textWidth; + canvas.height = paragraphs.length * textHeight*1.35; //for tails + // ctx.font = `${fontSize / 2}px ${font}`; + ctx.font = `${fontSize}px ${font}`; + + ctx.textBaseline = 'top'; // let y = fontSize; @@ -227,10 +229,9 @@ select#font-select, select#font-select option { paragraphs.forEach(paragraph => { // ctx.letterSpacing = "50px"; ctx.fillText(paragraph, 0, y); - y += 24; + y += fontSize; }); - // ctx.fillText(sigText, 0, fontSize); const dataURL = canvas.toDataURL(); From bd9b2675621ed6991fe9321c9d09d97edc43e54c Mon Sep 17 00:00:00 2001 From: Dimitrios Kaitantzidis Date: Sun, 8 Oct 2023 16:04:35 +0300 Subject: [PATCH 4/5] Fixes minor typos --- src/main/resources/templates/sign.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index 7584a72b..238c647d 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -214,7 +214,6 @@ select#font-select, select#font-select option { canvas.width = textWidth; canvas.height = paragraphs.length * textHeight*1.35; //for tails - // ctx.font = `${fontSize / 2}px ${font}`; ctx.font = `${fontSize}px ${font}`; @@ -227,7 +226,6 @@ select#font-select, select#font-select option { console.log(canvas.height); paragraphs.forEach(paragraph => { - // ctx.letterSpacing = "50px"; ctx.fillText(paragraph, 0, y); y += fontSize; }); From a019b8b5ca9fca22cb2345199b3b6e067b5b988b Mon Sep 17 00:00:00 2001 From: Dimitrios Kaitantzidis Date: Sun, 8 Oct 2023 17:02:03 +0300 Subject: [PATCH 5/5] Deletes console.log statements and commented out code. --- src/main/resources/templates/sign.html | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index 238c647d..a58298d1 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -188,13 +188,6 @@ select#font-select, select#font-select option { th:class="${font.name.toLowerCase()+'-font'}"> - - - - - - -
@@ -216,22 +209,15 @@ select#font-select, select#font-select option { canvas.height = paragraphs.length * textHeight*1.35; //for tails ctx.font = `${fontSize}px ${font}`; - ctx.textBaseline = 'top'; - // let y = fontSize; let y = 0; - console.log(paragraphs); - console.log(canvas.height); - paragraphs.forEach(paragraph => { ctx.fillText(paragraph, 0, y); y += fontSize; }); - // ctx.fillText(sigText, 0, fontSize); - const dataURL = canvas.toDataURL(); DraggableUtils.createDraggableCanvasFromUrl(dataURL); }