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');
-
Position/scale your art (X, Y, Scale)
Art is now visually adjustable! Click and drag anywhere on the card to move your art around, and hold shift while doing so to scale your art.
+
Position/scale your art (X, Y, Scale, Rotation)
Art is now visually adjustable! Click and drag anywhere on the card to move your art around. Hold shift while doing so to scale, or control to rotate.
+
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);