Started canvas trimming

This commit is contained in:
unsettledgames 2020-09-26 13:08:43 +02:00
parent 87a25c0137
commit 4223597659
3 changed files with 51 additions and 0 deletions

View File

@ -182,4 +182,12 @@ function resizeImageData (image, width, height, algorithm) {
resize(image, result)
return result
}
function getPixelPosition(index) {
let linearIndex = index / 4;
let y = linearIndex / layers[0].canvasSize[0];
let x = linearIndex - y * layers[0].canvasSize[0];
return [x, y];
}

View File

@ -166,6 +166,48 @@ function resizeCanvas(event, size) {
closeDialogue();
}
function trimCanvas() {
let minX, minY = Infinity;
let maxX, maxY = -Infinity;
rcPivot = "middle";
console.log("trimmo");
for (let i=1; i<nAppLayers; i++) {
let imageData = layers[i].context.getImageData(0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1]);
let pixelPosition;
for (let i=0; i<imageData.length; i+=4) {
if (!isPixelEmpty([imageData[i], imageData[i + 1], imageData[i + 2], imageData[i + 3]])) {
pixelPosition = getPixelPosition(i);
if (pixelPosition.x > maxX) {
maxX = pixelPosition[0];
}
else if (pixelPosition.x < minX) {
minX = pixelPosition[0];
}
if (pixelPosition.y > maxY) {
maxY = pixelPosition[1];
}
else if (pixelPosition.y < minY) {
minY = pixelPosition[1];
}
}
}
}
console.log(maxX + ", " + minX + ", " + maxY + ", " + minY);
borders.right = maxX - layers[0].canvasSize[0];
borders.left = -minX;
borders.top = maxY - layers[0].canvasSize[1];
borders.bottom = minY;
resizeCanvas(null);
}
function rcUpdateBorders() {
// Getting input
borders.left = document.getElementById("rc-border-left").value;

View File

@ -54,6 +54,7 @@
<ul>
<li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
<li><button id="resize-sprite-button" onclick = "openResizeSpriteWindow()">Scale sprite</button></li>
<li><button onclick = "trimCanvas()">Trim canvas</button></li>
<li><button id="undo-button" class="disabled">Undo</button></li>
<li><button id="redo-button" class="disabled">Redo</button></li>
</ul>