waifu/kemoverse
waifu/kemoverse
3
2
Fork 3
Code Issues 13 Pull requests 1 Projects 1 Releases Packages Wiki Activity

Enhance text wrapping in drawCard function to support multi-line input

Browse source
This commit is contained in:
w 2025-07-16 22:32:57 -03:00
parent 41505776af
commit eff962608f
1 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/templates/card_creator.html
View file

@ -137,21 +137,25 @@ async function drawCardId() {
function wrapText(text, x, y, maxWidth, lineHeight) {
const words = text.split(" ");
let line = "";
for (let n = 0; n < words.length; n++) {
const testLine = line + words[n] + " ";
const metrics = ctx.measureText(testLine);
const testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
ctx.fillText(line, x, y);
line = words[n] + " ";
y += lineHeight;
} else {
line = testLine;
const lines = text.split('\n');
for (let i = 0; i < lines.length; i++) {
let words = lines[i].split(" ");
let line = "";
for (let n = 0; n < words.length; n++) {
const testLine = line + words[n] + " ";
const metrics = ctx.measureText(testLine);
const testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
ctx.fillText(line, x, y);
line = words[n] + " ";
y += lineHeight;
} else {
line = testLine;
}
}
ctx.fillText(line, x, y);
y += lineHeight;
}
ctx.fillText(line, x, y);
}
// Update card live when inputs change