WIP: Makes font smaller but test is shown as whole and in multiline
This commit is contained in:
parent
88a90f22a3
commit
a71e813e82
1 changed files with 18 additions and 35 deletions
|
@ -202,50 +202,33 @@ select#font-select, select#font-select option {
|
||||||
function addDraggableFromText() {
|
function addDraggableFromText() {
|
||||||
const sigText = document.getElementById('sigText').value;
|
const sigText = document.getElementById('sigText').value;
|
||||||
const font = document.querySelector('select[name=font]').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 fontSize = 100;
|
||||||
|
|
||||||
const canvas = document.createElement('canvas');
|
const canvas = document.createElement('canvas');
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
ctx.font = `${fontSize}px ${font}`;
|
ctx.font = `${fontSize}px ${font}`;
|
||||||
|
const textWidth = ctx.measureText(sigText).width;
|
||||||
let yAxis = fontSize * .4;
|
const textHeight = fontSize;
|
||||||
|
|
||||||
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.width = textWidth;
|
||||||
canvas.height = textHeight*1.35; //for tails
|
canvas.height = textHeight*1.35; //for tails
|
||||||
ctx.font = `${fontSize}px ${font}`;
|
// ctx.font = `${fontSize / 2}px ${font}`;
|
||||||
// console.log(sigText);
|
ctx.font = `${fontSize / 2}px ${font}`;
|
||||||
console.log(sigText.split(/\r?\n/));
|
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);
|
// ctx.fillText(sigText, 0, fontSize);
|
||||||
|
|
Loading…
Reference in a new issue