Epicpkmn11/nftr-editor
1
Fork 0
mirror of https://github.com/Epicpkmn11/nftr-editor.git synced 2025-06-18 13:55:35 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add scaling text size

Browse Source 
- Closes #2
This commit is contained in:
Pk11 2022-10-04 08:57:41 -05:00
parent 95639581db
commit 0f0d8e39ed
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -53,6 +53,8 @@ show_version: true
<br>
Background image:
<input class="form-control" id="bgImage" placeholder="https://example.test/background.png" onchange="setBg(this.value)">
Scale:
<input class="form-control" id="previewScale" type="number" min="1" max="8" value="1" onchange="setScale(this.value)">
</div>
<div class="col-sm-6">
<h3>Palette colors:</h3>

33
js/nftr.js
View File

@ -3,7 +3,7 @@ let maxChar = 0;
let palette = [[0xFF, 0xFF, 0xFF, 0x00], [0x92, 0x92, 0x92, 0xFF], [0x43, 0x43, 0x43, 0xFF], [0x00, 0x00, 0x00, 0xFF]];
let paletteHTML = ["", "#929292", "#434343", "#000000"];
let data, fontU8, fileName;
let brushColor = 0, realColor = 0, extraKerning = 0;
let brushColor = 0, realColor = 0, extraKerning = 0, scale = 1;
var onkeydown, onkeyup;
@ -217,7 +217,7 @@ function updateBitmap() {
x = 0;
continue;
}
let imgData = ctx.createImageData(tileWidth, tileHeight);
let imgData = ctx.createImageData(tileWidth * scale, tileHeight * scale);
let t = getCharIndex(c);
let charImg = new Array(tileHeight * tileWidth);
@ -227,19 +227,27 @@ function updateBitmap() {
}
}
for(let i = 0; i < imgData.data.length / 4; i++) {
imgData.data[i * 4] = palette[charImg[i]][0];
imgData.data[i * 4 + 1] = palette[charImg[i]][1];
imgData.data[i * 4 + 2] = palette[charImg[i]][2];
imgData.data[i * 4 + 3] = palette[charImg[i]][3];
for(let y = 0; y < tileHeight; y++) {
for(let x = 0; x < tileWidth; x++) {
let sPos = y * tileWidth + x;
for(let i = 0; i < scale; i++) {
let dPos = (y * scale + i) * (tileWidth * scale) + x * scale;
for(let j = 0; j < scale; j++) {
imgData.data[(dPos + j) * 4] = palette[charImg[sPos]][0];
imgData.data[(dPos + j) * 4 + 1] = palette[charImg[sPos]][1];
imgData.data[(dPos + j) * 4 + 2] = palette[charImg[sPos]][2];
imgData.data[(dPos + j) * 4 + 3] = palette[charImg[sPos]][3];
}
}
}
}
let width = (bytesPerWidth == 3 ? fontWidths[t][2] : fontWidths[t][0] + fontWidths[t][1]) + extraKerning;
let width = ((bytesPerWidth == 3 ? fontWidths[t][2] : fontWidths[t][0] + fontWidths[t][1]) + extraKerning) * scale;
if(x + width > canvas.width) {
y += tileHeight;
y += tileHeight * scale;
x = 0;
}
ctx.putImageData(imgData, x + fontWidths[t][0], y);
ctx.putImageData(imgData, x + fontWidths[t][0] * scale, y);
x += width;
}
}
@ -1314,3 +1322,8 @@ function setBg(value) {
document.getElementById("bgColor").style.backgroundColor = ""
}
}
function setScale(value) {
scale = value | 0;
updateBitmap();
}