Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

art visual editor

Browse Source
This commit is contained in:
Kyle
2021-05-01 15:59:38 -07:00
parent 9f00362c6e
commit 453beec2fb
2 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
creator/index.php
View File

@@ -231,7 +231,7 @@ 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)</h5> <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>
<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>
@@ -472,5 +472,5 @@ include('../globalHTML/header-1.php');
</h4> </h4>
</div> </div>
</div> </div>
<script defer src='/js/creator-14.js'></script> <script defer src='/js/creator-15.js'></script>
<?php include('../globalHTML/footer.php'); ?> <?php include('../globalHTML/footer.php'); ?>

46
js/creator-14.js → js/creator-15.js
View File

@@ -980,6 +980,51 @@ function changeArtIndex() {
artistEdited(scryfallArt[document.querySelector('#art-index').value - 1].artist); artistEdited(scryfallArt[document.querySelector('#art-index').value - 1].artist);
} }
} }
function initDraggableArt() {
previewCanvas.onmousedown = artStartDrag;
previewCanvas.onmousemove = artDrag;
previewCanvas.onmouseout = artStopDrag;
previewCanvas.onmouseup = artStopDrag;
draggingArt = false;
lastArtDragTime = 0;
}
function artStartDrag(e) {
e.preventDefault();
e.stopPropagation();
startX = parseInt(e.clientX);
startY = parseInt(e.clientY);
draggingArt = true;
}
function artDrag(e) {
e.preventDefault();
e.stopPropagation();
if (draggingArt && Date.now() > lastArtDragTime + 25) {
lastArtDragTime = Date.now();
if (e.shiftKey) {
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;
startY = endY;
artEdited();
} else {
const endX = parseInt(e.clientX);
const endY = parseInt(e.clientY);
document.querySelector('#art-x').value = parseInt(document.querySelector('#art-x').value) + (endX - startX) * 2;
document.querySelector('#art-y').value = parseInt(document.querySelector('#art-y').value) + (endY - startY) * 2;
startX = endX;
startY = endY;
artEdited();
}
}
}
function artStopDrag(e) {
e.preventDefault();
e.stopPropagation();
if (draggingArt) {
draggingArt = false;
}
}
//SET SYMBOL TAB //SET SYMBOL TAB
function uploadSetSymbol(imageSource, otherParams) { function uploadSetSymbol(imageSource, otherParams) {
setSymbol.src = imageSource; setSymbol.src = imageSource;
@@ -1546,3 +1591,4 @@ document.querySelector('#autoLoadFrameVersion').checked = 'true' == localStorage
document.querySelector('#info-number').value = date.getFullYear(); document.querySelector('#info-number').value = date.getFullYear();
loadScript('/js/frames/groupStandard-3.js'); loadScript('/js/frames/groupStandard-3.js');
loadAvailableCards(); loadAvailableCards();
initDraggableArt();