Merge pull request #415 from DimK10/Feature_Request-Bigger_text_input
Feature request bigger text input
This commit is contained in:
commit
22c19670e9
1 changed files with 13 additions and 4 deletions
|
@ -179,7 +179,7 @@ select#font-select, select#font-select option {
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-container" th:title="#{sign.text}">
|
<div class="tab-container" th:title="#{sign.text}">
|
||||||
<label class="form-check-label" for="sigText" th:text="#{text}"></label>
|
<label class="form-check-label" for="sigText" th:text="#{text}"></label>
|
||||||
<input type="text" class="form-control" id="sigText" name="sigText">
|
<textarea class="form-control" id="sigText" name="sigText" rows="3"></textarea>
|
||||||
<label th:text="#{font}"></label>
|
<label th:text="#{font}"></label>
|
||||||
<select class="form-control" name="font" id="font-select">
|
<select class="form-control" name="font" id="font-select">
|
||||||
<option th:each="font : ${fonts}"
|
<option th:each="font : ${fonts}"
|
||||||
|
@ -188,7 +188,6 @@ select#font-select, select#font-select option {
|
||||||
th:class="${font.name.toLowerCase()+'-font'}">
|
th:class="${font.name.toLowerCase()+'-font'}">
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<div class="margin-auto-parent">
|
<div class="margin-auto-parent">
|
||||||
<button id="save-text-signature" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromText()" th:text="#{sign.add}"></button>
|
<button id="save-text-signature" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromText()" th:text="#{sign.add}"></button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -204,10 +203,20 @@ select#font-select, select#font-select option {
|
||||||
const textWidth = ctx.measureText(sigText).width;
|
const textWidth = ctx.measureText(sigText).width;
|
||||||
const textHeight = fontSize;
|
const textHeight = fontSize;
|
||||||
|
|
||||||
|
let paragraphs = sigText.split(/\r?\n/);
|
||||||
|
|
||||||
canvas.width = textWidth;
|
canvas.width = textWidth;
|
||||||
canvas.height = textHeight*1.35; //for tails
|
canvas.height = paragraphs.length * textHeight*1.35; //for tails
|
||||||
ctx.font = `${fontSize}px ${font}`;
|
ctx.font = `${fontSize}px ${font}`;
|
||||||
ctx.fillText(sigText, 0, fontSize);
|
|
||||||
|
ctx.textBaseline = 'top';
|
||||||
|
|
||||||
|
let y = 0;
|
||||||
|
|
||||||
|
paragraphs.forEach(paragraph => {
|
||||||
|
ctx.fillText(paragraph, 0, y);
|
||||||
|
y += fontSize;
|
||||||
|
});
|
||||||
|
|
||||||
const dataURL = canvas.toDataURL();
|
const dataURL = canvas.toDataURL();
|
||||||
DraggableUtils.createDraggableCanvasFromUrl(dataURL);
|
DraggableUtils.createDraggableCanvasFromUrl(dataURL);
|
||||||
|
|
Loading…
Reference in a new issue