mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
print page - bleed edge color
This commit is contained in:
@@ -40,6 +40,8 @@ include('../globalHTML/header-1.php');
|
||||
<input id='bleedEdgeCheckbox' type='checkbox' onchange='setBleedEdge(this.checked);' checked>
|
||||
<span class='checkmark'></span>
|
||||
</label>
|
||||
<h5 class='margin-bottom padding input-description'>Bleed Edge Color</h5>
|
||||
<input id='bleedEdgeColor' type='color' class='input margin-bottom' onchange='setBleedEdgeColor(this.value);'>
|
||||
<h5 class='margin-bottom padding input-description'>Save your current configurations as default</h5>
|
||||
<button onclick='saveDefaults();' class='input margin-bottom'>Save configuration</button>
|
||||
</div>
|
||||
|
@@ -12,6 +12,7 @@ var cardMarginX = parseInt(document.querySelector("#cardMargin").value);
|
||||
var cardMarginY = cardMarginX;
|
||||
//booleans
|
||||
var imgIncludesBleedEdge = true;
|
||||
var bleedEdgeColor = "black";
|
||||
var useCuttingAids = false;
|
||||
//Prepare variables/canvas/context
|
||||
var imageList = [];
|
||||
@@ -62,6 +63,7 @@ function drawSheetReal() {
|
||||
if (imgIncludesBleedEdge) {
|
||||
context.drawImage(imageList[i], x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
|
||||
} else {
|
||||
context.fillStyle = bleedEdgeColor;
|
||||
context.fillRect(x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
|
||||
context.drawImage(imageList[i], x, y, w, h);
|
||||
}
|
||||
@@ -100,6 +102,7 @@ function downloadPDF() {
|
||||
defaultPadding.width = 1;
|
||||
defaultPadding.height = 1;
|
||||
var defaultPaddingContext = defaultPadding.getContext("2d");
|
||||
defaultPaddingContext.fillStyle = bleedEdgeColor;
|
||||
defaultPaddingContext.fillRect(0, 0, 1, 1);
|
||||
//Calc actual card size
|
||||
const cw = cardWidth + 2 * cardPaddingX + cardMarginX;
|
||||
@@ -180,6 +183,10 @@ function setBleedEdge(bool) {
|
||||
imgIncludesBleedEdge = bool;
|
||||
drawSheet();
|
||||
}
|
||||
function setBleedEdgeColor(color) {
|
||||
bleedEdgeColor = color;
|
||||
drawSheet();
|
||||
}
|
||||
function setCuttingAids(bool) {
|
||||
useCuttingAids = bool;
|
||||
drawSheet();
|
||||
@@ -196,6 +203,7 @@ function saveDefaults() {
|
||||
cardPaddingX:cardPaddingX,
|
||||
cardPaddingY:cardPaddingY,
|
||||
bleedEdge:imgIncludesBleedEdge,
|
||||
bleedEdgeColor:bleedEdgeColor,
|
||||
cuttingAids:useCuttingAids
|
||||
}
|
||||
localStorage.setItem("cardPrintConfig", JSON.stringify(cardObject));
|
||||
@@ -218,6 +226,8 @@ function loadDefaults() {
|
||||
document.querySelector("#cardPadding").value = cardPaddingX;
|
||||
imgIncludesBleedEdge = cardObject.bleedEdge;
|
||||
document.querySelector("#bleedEdgeCheckbox").checked = imgIncludesBleedEdge;
|
||||
bleedEdgeColor = cardObject.bleedEdgeColor;
|
||||
document.querySelector("#bleedEdgeColor").value = bleedEdgeColor;
|
||||
useCuttingAids = cardObject.cuttingAids;
|
||||
document.querySelector("#cuttingAidsCheckbox").checked = useCuttingAids;
|
||||
}
|
||||
|
Reference in New Issue
Block a user