v/Cat-Printer
1
0
Fork 0
mirror of https://github.com/NaitLee/Cat-Printer.git synced 2025-05-29 13:40:10 -07:00
Code Issues Packages Projects Releases Wiki Activity

+ Added font and text size to settings panel

Browse Source
This commit is contained in:
Sync1211 2022-05-18 12:02:30 +02:00
parent 949ab15857
commit 8f402eb80f
No known key found for this signature in database
GPG Key ID: B8878699435E69EC
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
www/index.html
View File

@ -91,6 +91,19 @@
<input type="checkbox" name="dump" data-key />
<span data-i18n="dump-traffic">Dump Traffic</span>
</label> -->
<label data-i18n="text-font">Text font</label>
<select id="text-font">
<option value="Serif">Serif</option>
<option value="Sans-serif" selected>Sans-serif</option>
<option value="monospace">Monospace</option>
<option value="cursive">Cursive</option>
</select>
<br>
<label>
<span data-i18n="text-size-">Text size:</span>
<input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
<span>px</span>
</label>
<button id="set-accessibility" data-key>
<span>🌎</span>
<span data-i18n="accessibility">Accessibility</span>

33
www/main.js
View File

@ -439,31 +439,46 @@ class CanvasController {
}
}
insertText() {
let text = prompt("Enter text");
let lines = [];
const textSize = parseInt(document.getElementById("text-size").value);
const textFont = document.getElementById("text-font").value;
const yStep = textSize;
const ctx = this.canvas.getContext("2d");
ctx.font = textSize + "px " + textFont;
// const textWidth = ctx.measureText(textSize);
const maxWidth = this.canvas.width - 10;
let text = prompt("Enter text");
if (text == null) { return; }
// Use Word Wrap to split the text over multiple lines
let lines = [];
const getMaxCharsPerLine = (text, ctx) => {
let textWidth = ctx.measureText(text).width;
let textIndex = maxWidth / textWidth;
if (textIndex > 1) { return text.length}
return Math.floor(textIndex * text.length);
}
const wrapText = (text, maxLength) => {
let splitPos = maxLength - 1;
while (text[splitPos] != " " && splitPos > 0) {
splitPos--;
}
if (splitPos == 0) { splitPos = maxLength; }
return [text.slice(0, splitPos), text.slice(splitPos, text.length)];
return [text.slice(0, splitPos).trim(), text.slice(splitPos, text.length).trim()];
}
const maxLength = 33;
while (text.length > maxLength) {
while (ctx.measureText(text).width > maxWidth) {
let line;
[line, text] = wrapText(text, maxLength);
[line, text] = wrapText(text, getMaxCharsPerLine(text, ctx));
lines.push(line);
}
lines.push(text)
let ctx = this.canvas.getContext("2d");
ctx.font = "20px Sans-Serif";
const yStep = 20;
let yPos = yStep;
for (let line of lines) {
ctx.fillText(line, 0, yPos);