mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Finished basic canvas resizing

Browse Source 
Must test pivots for negative values
This commit is contained in:
unsettledgames
2020-09-15 11:56:05 +02:00
parent 592283321a
commit 5e2a3e46e1
3 changed files with 195 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
js/_resizeCanvas.js
View File

@ -1,5 +1,6 @@
let resizeCanvasContainer = document.getElementById("resize-canvas");
let pivot = "middle";
let currentPivotObject;
let resizeCanvasInitialized = false;
let borders = {left: 0, right: 0, top: 0, bottom: 0};
@ -16,14 +17,61 @@ function initResizeCanvasInputs() {
for (let i=0; i<buttons.length; i++) {
buttons[i].addEventListener("click", changePivot);
if (buttons[i].getAttribute("value").includes("middle")) {
currentPivotObject = buttons[i];
}
}
document.getElementById("rc-width").value = layers[0].canvasSize[0];
document.getElementById("rc-height").value = layers[0].canvasSize[1];
document.getElementById("rc-border-left").addEventListener("change", changedBorder);
document.getElementById("rc-border-right").addEventListener("change", changedBorder);
document.getElementById("rc-border-top").addEventListener("change", changedBorder);
document.getElementById("rc-border-bottom").addEventListener("change", changedBorder);
document.getElementById("rc-width").addEventListener("change", changedSize);
document.getElementById("rc-height").addEventListener("change", changedSize);
document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
console.log("Pivot selezionato: " + currentPivotObject);
}
function changedBorder(event) {
rcUpdateBorders();
document.getElementById("rc-width").value = parseInt(layers[0].canvasSize[0]) + borders.left + borders.right;
document.getElementById("rc-height").value = parseInt(layers[0].canvasSize[1]) + borders.top + borders.bottom;
}
function changedSize(event) {
let widthOffset = document.getElementById("rc-width").value - layers[0].canvasSize[0];
let heightOffset = document.getElementById("rc-height").value - layers[0].canvasSize[1];
let left = Math.round(widthOffset / 2);
let right = widthOffset - left;
let top = Math.round(heightOffset / 2);
let bottom = heightOffset - top;
document.getElementById("rc-border-left").value = left;
document.getElementById("rc-border-right").value = right;
document.getElementById("rc-border-top").value = top;
document.getElementById("rc-border-bottom").value = bottom;
borders.left = left;
borders.right = right;
borders.top = top;
borders.bottom = bottom;
}
function resizeCanvas(event) {
let imageDatas = [];
let leftOffset = 0;
let topOffset = 0;
let copiedDataIndex = 0;
rcUpdateBorders();
changedSize();
// Save all imageDatas
for (let i=0; i<layers.length; i++) {
@ -34,21 +82,79 @@ function resizeCanvas(event) {
// Resize the canvases
for (let i=0; i<layers.length; i++) {
layers[i].canvasSize[0] += borders.left + borders.right;
layers[i].canvasSize[1] += borders.top + borders.bottom;
layers[i].canvasSize[0] = parseInt(layers[i].canvasSize[0]) + borders.left + borders.right;
layers[i].canvasSize[1] = parseInt(layers[i].canvasSize[1]) + borders.top + borders.bottom;
layers[i].canvas.width = layers[i].canvasSize[0];
layers[i].canvas.height = layers[i].canvasSize[1];
layers[i].resize();
layers[i].context.fillStyle = currentGlobalColor;
}
// Clear the canvases
// Regenerate the checkerboard
fillCheckerboard();
// Put the imageDatas in the right position
// Must crop the imageDatas if the canvas has being reduced
switch (pivot)
{
case 'topleft':
leftOffset = 0;
topOffset = 0;
break;
case 'top':
leftOffset = (borders.left + borders.right) / 2;
topOffset = 0;
break;
case 'topright':
leftOffset = borders.left + borders.right;
topOffset = 0;
break;
case 'left':
leftOffset = 0;
topOffset = (borders.top + borders.bottom) / 2;
break;
case 'middle':
leftOffset = (borders.left + borders.right) / 2;
topOffset = (borders.top + borders.bottom) / 2;
break;
case 'right':
leftOffset = borders.left + borders.right;
topOffset = (borders.top + borders.bottom) / 2;
break;
case 'bottomleft':
leftOffset = 0;
topOffset = borders.top + borders.bottom;
break;
case 'bottom':
leftOffset = (borders.left + borders.right) / 2;
topOffset = borders.top + borders.bottom;
break;
case 'bottomright':
leftOffset = borders.left + borders.right;
topOffset = borders.top + borders.bottom;
break;
default:
console.log('now thats a very weird pivot');
break;
}
/*
leftOffset = Math.abs(leftOffset);
topOffset = Math.abs(topOffset);
*/
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
copiedDataIndex++;
}
}
closeDialogue();
}
function rcUpdateBorders() {
console.log(document.getElementById("rc-border-left").value);
// Getting input
borders.left = document.getElementById("rc-border-left").value;
borders.right = document.getElementById("rc-border-right").value;
@ -60,11 +166,14 @@ function rcUpdateBorders() {
borders.right == "" ? borders.right = 0 : borders.right = Math.round(parseInt(borders.right));
borders.top == "" ? borders.top = 0 : borders.top = Math.round(parseInt(borders.top));
borders.bottom == "" ? borders.bottom = 0 : borders.bottom = Math.round(parseInt(borders.bottom));
console.log(borders);
}
function changePivot(event) {
pivot = event.target.getAttribute("value");
// Setting the selected class
currentPivotObject.classList.remove("rc-selected-pivot");
currentPivotObject = event.target;
currentPivotObject.classList.add("rc-selected-pivot");
}