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