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() {
|
||||
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);
|
||||
|
|
Loading…
Reference in a new issue