diff --git a/creator/index.php b/creator/index.php
index b712044c..8c689fe8 100644
--- a/creator/index.php
+++ b/creator/index.php
@@ -237,11 +237,12 @@ include('../globalHTML/header-1.php');
-
+
+
Auto Fit Art
diff --git a/js/creator-18.js b/js/creator-18.js
index 8d05dc1c..f1200598 100644
--- a/js/creator-18.js
+++ b/js/creator-18.js
@@ -16,7 +16,7 @@ function fixUri(input) {
}
}
//card object
-var card = {width:1500, height:2100, marginX:0, marginY:0, frames:[], artSource:fixUri('/img/blank.png'), artX:0, artY:0, artZoom:1, setSymbolSource:fixUri('/img/blank.png'), setSymbolX:0, setSymbolY:0, setSymbolZoom:1, watermarkSource:fixUri('/img/blank.png'), watermarkX:0, watermarkY:0, watermarkZoom:1, watermarkLeft:'none', watermarkRight:'none', watermarkOpacity:0.4, version:'', manaSymbols:[]};
+var card = {width:1500, height:2100, marginX:0, marginY:0, frames:[], artSource:fixUri('/img/blank.png'), artX:0, artY:0, artZoom:1, artRotate:0, setSymbolSource:fixUri('/img/blank.png'), setSymbolX:0, setSymbolY:0, setSymbolZoom:1, watermarkSource:fixUri('/img/blank.png'), watermarkX:0, watermarkY:0, watermarkZoom:1, watermarkLeft:'none', watermarkRight:'none', watermarkOpacity:0.4, version:'', manaSymbols:[]};
//core images/masks
const black = new Image(); black.crossOrigin = 'anonymous'; black.src = fixUri('/img/black.png');
const blank = new Image(); blank.crossOrigin = 'anonymous'; blank.src = fixUri('/img/blank.png');
@@ -1004,9 +1004,11 @@ function artEdited() {
card.artX = document.querySelector('#art-x').value / card.width;
card.artY = document.querySelector('#art-y').value / card.height;
card.artZoom = document.querySelector('#art-zoom').value / 100;
+ card.artRotate = document.querySelector('#art-rotate').value;
drawCard();
}
function autoFitArt() {
+ document.querySelector('#art-rotate').value = 0;
if (art.width / art.height > scaleWidth(card.artBounds.width) / scaleHeight(card.artBounds.height)) {
document.querySelector('#art-y').value = Math.round(scaleY(card.artBounds.y) - scaleHeight(card.marginY));
document.querySelector('#art-zoom').value = (scaleHeight(card.artBounds.height) / art.height * 100).toFixed(1);
@@ -1059,10 +1061,14 @@ function artDrag(e) {
e.stopPropagation();
if (draggingArt && Date.now() > lastArtDragTime + 25) {
lastArtDragTime = Date.now();
- if (e.shiftKey) {
+ if (e.shiftKey || e.ctrlKey) {
startX = parseInt(e.clientX);
const endY = parseInt(e.clientY);
- document.querySelector('#art-zoom').value = Math.round((parseFloat(document.querySelector('#art-zoom').value) * (1.002 ** (startY - endY))) * 10) / 10;
+ if (e.ctrlKey) {
+ document.querySelector('#art-rotate').value = Math.round((parseFloat(document.querySelector('#art-rotate').value) - (startY - endY) / 10) % 360 * 10) / 10;
+ } else {
+ document.querySelector('#art-zoom').value = Math.round((parseFloat(document.querySelector('#art-zoom').value) * (1.002 ** (startY - endY))) * 10) / 10;
+ }
startY = endY;
artEdited();
} else {
@@ -1274,7 +1280,11 @@ function setDefaultCollector() {
function drawCard() {
cardContext.globalCompositeOperation = 'source-over';
cardContext.clearRect(0, 0, cardCanvas.width, cardCanvas.height);
- cardContext.drawImage(art, scaleX(card.artX), scaleY(card.artY), art.width * card.artZoom, art.height * card.artZoom);
+ cardContext.save();
+ cardContext.translate(scaleX(card.artX), scaleY(card.artY));
+ cardContext.rotate(Math.PI / 180 * (card.artRotate || 0));
+ cardContext.drawImage(art, 0, 0, art.width * card.artZoom, art.height * card.artZoom);
+ cardContext.restore();
cardContext.drawImage(frameCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
if (card.version.includes('planeswalker') && typeof planeswalkerCanvas !== "undefined") {
cardContext.drawImage(planeswalkerCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
@@ -1485,6 +1495,7 @@ async function loadCard(selectedCardKey) {
document.querySelector('#art-x').value = scaleX(card.artX) - scaleWidth(card.marginX);
document.querySelector('#art-y').value = scaleY(card.artY) - scaleHeight(card.marginY);
document.querySelector('#art-zoom').value = card.artZoom * 100;
+ document.querySelector('#art-rotate').value = card.artRotate || 0;
uploadArt(card.artSource);
document.querySelector('#setSymbol-x').value = scaleX(card.setSymbolX) - scaleWidth(card.marginX);
document.querySelector('#setSymbol-y').value = scaleY(card.setSymbolY) - scaleHeight(card.marginY);