GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

art rotation

Browse Source
This commit is contained in:
Kyle
2021-05-16 11:15:03 -07:00
parent 6a3e9f46ea
commit 536d49fac3
2 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
creator/index.php
View File

@@ -237,11 +237,12 @@ include('../globalHTML/header-1.php');
</div> </div>
</div> </div>
<div class='readable-background padding margin-bottom'> <div class='readable-background padding margin-bottom'>
<h5 class='margin-bottom padding input-description'>Position/scale your art (X, Y, Scale)<br>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.</h5> <h5 class='margin-bottom padding input-description'>Position/scale your art (X, Y, Scale, Rotation)<br>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.</h5>
<div class='input-grid margin-bottom'> <div class='input-grid margin-bottom'>
<input id='art-x' type='number' class='input' oninput='artEdited();' value=0> <input id='art-x' type='number' class='input' oninput='artEdited();' value=0>
<input id='art-y' type='number' class='input' oninput='artEdited();' value=0> <input id='art-y' type='number' class='input' oninput='artEdited();' value=0>
<input id='art-zoom' type='number' class='input' oninput='artEdited();' value=100 step=0.1 min=0> <input id='art-zoom' type='number' class='input' oninput='artEdited();' value=100 step=0.1 min=0>
<input id='art-rotate' type='number' class='input' oninput='artEdited();' value=0 step=1 min=0 max=360>
</div> </div>
<div class='input-grid'> <div class='input-grid'>
<button class='input' onclick='autoFitArt();'>Auto Fit Art</button> <button class='input' onclick='autoFitArt();'>Auto Fit Art</button>

17
js/creator-18.js
View File

@@ -16,7 +16,7 @@ function fixUri(input) {
} }
} }
//card object //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 //core images/masks
const black = new Image(); black.crossOrigin = 'anonymous'; black.src = fixUri('/img/black.png'); 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'); 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.artX = document.querySelector('#art-x').value / card.width;
card.artY = document.querySelector('#art-y').value / card.height; card.artY = document.querySelector('#art-y').value / card.height;
card.artZoom = document.querySelector('#art-zoom').value / 100; card.artZoom = document.querySelector('#art-zoom').value / 100;
card.artRotate = document.querySelector('#art-rotate').value;
drawCard(); drawCard();
} }
function autoFitArt() { function autoFitArt() {
document.querySelector('#art-rotate').value = 0;
if (art.width / art.height > scaleWidth(card.artBounds.width) / scaleHeight(card.artBounds.height)) { 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-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); document.querySelector('#art-zoom').value = (scaleHeight(card.artBounds.height) / art.height * 100).toFixed(1);
@@ -1059,10 +1061,14 @@ function artDrag(e) {
e.stopPropagation(); e.stopPropagation();
if (draggingArt && Date.now() > lastArtDragTime + 25) { if (draggingArt && Date.now() > lastArtDragTime + 25) {
lastArtDragTime = Date.now(); lastArtDragTime = Date.now();
if (e.shiftKey) { if (e.shiftKey || e.ctrlKey) {
startX = parseInt(e.clientX); startX = parseInt(e.clientX);
const endY = parseInt(e.clientY); const endY = parseInt(e.clientY);
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; document.querySelector('#art-zoom').value = Math.round((parseFloat(document.querySelector('#art-zoom').value) * (1.002 ** (startY - endY))) * 10) / 10;
}
startY = endY; startY = endY;
artEdited(); artEdited();
} else { } else {
@@ -1274,7 +1280,11 @@ function setDefaultCollector() {
function drawCard() { function drawCard() {
cardContext.globalCompositeOperation = 'source-over'; cardContext.globalCompositeOperation = 'source-over';
cardContext.clearRect(0, 0, cardCanvas.width, cardCanvas.height); 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); cardContext.drawImage(frameCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
if (card.version.includes('planeswalker') && typeof planeswalkerCanvas !== "undefined") { if (card.version.includes('planeswalker') && typeof planeswalkerCanvas !== "undefined") {
cardContext.drawImage(planeswalkerCanvas, 0, 0, cardCanvas.width, cardCanvas.height); 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-x').value = scaleX(card.artX) - scaleWidth(card.marginX);
document.querySelector('#art-y').value = scaleY(card.artY) - scaleHeight(card.marginY); document.querySelector('#art-y').value = scaleY(card.artY) - scaleHeight(card.marginY);
document.querySelector('#art-zoom').value = card.artZoom * 100; document.querySelector('#art-zoom').value = card.artZoom * 100;
document.querySelector('#art-rotate').value = card.artRotate || 0;
uploadArt(card.artSource); uploadArt(card.artSource);
document.querySelector('#setSymbol-x').value = scaleX(card.setSymbolX) - scaleWidth(card.marginX); document.querySelector('#setSymbol-x').value = scaleX(card.setSymbolX) - scaleWidth(card.marginX);
document.querySelector('#setSymbol-y').value = scaleY(card.setSymbolY) - scaleHeight(card.marginY); document.querySelector('#setSymbol-y').value = scaleY(card.setSymbolY) - scaleHeight(card.marginY);