Fixed bug in canvas resizing when resizing sprite

This commit is contained in:
unsettledgames
2020-09-21 10:39:37 +02:00
parent e9277db48c
commit 2a9acebd2f
3 changed files with 93 additions and 23 deletions

View File

@@ -40,75 +40,144 @@ function initResizeSpriteInputs() {
}
function resizeSprite() {
let newWidth, newHeight;
rcPivot = "middle";
// Updating values if the user didn't press enter
switch (document.activeElement.id) {
case "rs-width-percentage":
changedWidthPercentage();
break;
case "rs-width":
changedWidth();
break;
case "rs-height-percentage":
changedHeightPercentage();
break;
case "rs-height":
changedHeight();
break;
default:
// In this case everything has been updated correctly
break;
}
newWidth = data.width;
newHeight = data.height;
console.log(newWidth + ", " + newHeight);
// Resizing the canvas
resizeCanvas(null, {x: newWidth, y: newHeight});
// Get all the image datas
// Resize the canvases
// Resize the image datas
// Put the image datas on the new canvases
closeDialogue();
}
function changedWidth(event) {
let oldValue = data.width;
let ratio;
let percentageRatio;
let newHeight, newHeightPerc, newWidthPerc;
data.width = event.target.value;
delta = data.width - oldValue;
ratio = data.width / oldValue;
newHeight = data.width / currentRatio;
newHeightPerc = (newHeight * 100) / startData.height;
newWidthPerc = (data.width * 100) / startData.width;
if (keepRatio) {
document.getElementById("rs-height").value = data.width / currentRatio;
document.getElementById("rs-height-percentage").value = (data.width * 100) / startData.width;
document.getElementById("rs-height").value = newHeight;
data.height = newHeight;
document.getElementById("rs-height-percentage").value = newHeightPerc;
data.heightPercentage = newHeightPerc;
}
document.getElementById("rs-width-percentage").value = (data.width * 100) / startData.width;
document.getElementById("rs-width-percentage").value = newWidthPerc;
}
function changedHeight(event) {
let oldValue = data.height;
let ratio;
let newWidth, newWidthPerc, newHeightPerc;
data.height = event.target.value;
delta = data.height - oldValue;
ratio = data.height / oldValue;
newWidth = data.height * currentRatio;
newWidthPerc = (newWidth * 100) / startData.width;
newHeightPerc = (data.height * 100) / startData.height;
if (keepRatio) {
document.getElementById("rs-width").value = data.height * currentRatio;
document.getElementById("rs-width-percentage").value = (data.height * 100) / startData.height;
document.getElementById("rs-width").value = newWidth;
data.width = newWidth;
document.getElementById("rs-width-percentage").value = newWidthPerc;
data.widthPercentage = newWidthPerc;
}
document.getElementById("rs-height-percentage").value = (data.height * 100) / startData.height;
document.getElementById("rs-height-percentage").value = newHeightPerc;
data.heightPercentage = newHeightPerc;
}
function changedWidthPercentage(event) {
let oldValue = data.widthPercentage;
let ratio;
let newWidth, newHeight, newHeightPerc;
data.widthPercentage = event.target.value;
delta = data.widthPercentage - oldValue;
ratio = data.widthPercentage / oldValue;
newHeight = document.getElementById("rs-height").value * ratio;
newHeightPerc = data.widthPercentage / currentRatio;
newWidth = document.getElementById("rs-width").value * ratio;
if (keepRatio) {
document.getElementById("rs-height-percentage").value = data.widthPercentage / currentRatio;
document.getElementById("rs-height").value *= ratio;
document.getElementById("rs-height-percentage").value = newHeightPerc;
data.heightPercentage = newHeightPerc;
document.getElementById("rs-height").value = newHeight
data.height = newHeight;
}
document.getElementById("rs-width").value *= ratio;
document.getElementById("rs-width").value = newWidth;
data.width = newWidth;
}
function changedHeightPercentage(event) {
let oldValue = data.heightPercentage;
let ratio;
let newHeight, newWidth, newWidthPerc;
data.heightPercentage = event.target.value;
delta = data.heightPercentage - oldValue;
ratio = data.heightPercentage / oldValue;
newWidth = document.getElementById("rs-width").value * ratio;
newWidthPerc = data.heightPercentage * currentRatio;
newHeight = document.getElementById("rs-height").value * ratio;
if (keepRatio) {
document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio;
document.getElementById("rs-width").value *= ratio;
data.widthPercentage = newWidthPerc;
document.getElementById("rs-width").value = newWidth;
data.width = newWidth;
}
document.getElementById("rs-height").value *= ratio;
document.getElementById("rs-height").value = newHeight;
data.height = newHeight;
}
function toggleRatio(event) {