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

masks move with images

Browse Source
This commit is contained in:
Kyle
2021-01-25 19:48:35 -08:00
parent 4a51209ad8
commit 93e58dbe2e
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
creator/index.php
View File

@@ -405,5 +405,5 @@
</h4>
</div>
</div>
<script defer src='/js/creator-5.js'></script>
<script defer src='/js/creator-6.js'></script>
<?php include('../globalHTML/footer.php'); ?>

6
js/creator-5.js → js/creator-6.js
View File

@@ -262,6 +262,7 @@ function drawFrames() {
frameContext.globalAlpha = 0;
}
var bounds = item.bounds || {};
var ogBounds = item.ogBounds || bounds;
frameX = Math.round(scaleX(bounds.x || 0));
frameY = Math.round(scaleY(bounds.y || 0));
frameWidth = Math.round(scaleWidth(bounds.width || 1));
@@ -269,7 +270,7 @@ function drawFrames() {
frameMaskingContext.globalCompositeOperation = 'source-over';
frameMaskingContext.drawImage(black, 0, 0, frameMaskingCanvas.width, frameMaskingCanvas.height);
frameMaskingContext.globalCompositeOperation = 'source-in';
item.masks.forEach(mask => frameMaskingContext.drawImage(mask.image, scaleX(0), scaleY(0), scaleWidth(1), scaleHeight(1)));
item.masks.forEach(mask => frameMaskingContext.drawImage(mask.image, scaleX((bounds.x || 0) - (ogBounds.x || 0) - ((ogBounds.x || 0) * ((bounds.width || 1) / (ogBounds.width || 1) - 1))), scaleY((bounds.y || 0) - (ogBounds.y || 0) - ((ogBounds.y || 0) * ((bounds.height || 1) / (ogBounds.height || 1) - 1))), scaleWidth((bounds.width || 1) / (ogBounds.width || 1)), scaleHeight((bounds.height || 1) / (ogBounds.height || 1))));
frameMaskingContext.drawImage(item.image, frameX, frameY, frameWidth, frameHeight);
if (item.erase) {frameContext.globalCompositeOperation = 'destination-out';}
frameContext.drawImage(frameMaskingCanvas, 0, 0, frameCanvas.width, frameCanvas.height);
@@ -429,6 +430,9 @@ function frameElementClicked(event) {
var selectedFrame = card.frames[Array.from(selectedFrameElement.parentElement.children).indexOf(selectedFrameElement)];
document.querySelector('#frame-element-editor').classList.add('opened');
selectedFrame.bounds = selectedFrame.bounds || {};
if (selectedFrame.ogBounds == undefined) {
selectedFrame.ogBounds = JSON.parse(JSON.stringify(selectedFrame.bounds));
}
document.querySelector('#frame-editor-x').value = scaleWidth(selectedFrame.bounds.x || 0);
document.querySelector('#frame-editor-x').onchange = (event) => {selectedFrame.bounds.x = (event.target.value / card.width); drawFrames();}
document.querySelector('#frame-editor-y').value = scaleHeight(selectedFrame.bounds.y || 0);