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

kerning

Browse Source
This commit is contained in:
Kyle
2021-06-02 11:00:50 -07:00
parent c7a708e1b7
commit 181a1e599b
3 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
creator/index.php
View File

@@ -198,6 +198,7 @@ include('../globalHTML/header-1.php');
<h5>{right#}</h5><h5>Moves the text # pixels right</h5> <h5>{right#}</h5><h5>Moves the text # pixels right</h5>
<h5>{shadow#}</h5><h5>Changes the shadow distance to #</h5> <h5>{shadow#}</h5><h5>Changes the shadow distance to #</h5>
<h5>{shadowcolor#}</h5><h5>Changes the shadow color to #</h5> <h5>{shadowcolor#}</h5><h5>Changes the shadow color to #</h5>
<h5>{kerning#}</h5><h5>Changes the kerning (letter spacing) to #</h5>
<h5>Notes</h5><h5>For colors, you may use HTML color codes (ie 'green'), hex color codes (ie '#00FF00'), or rgb (ie 'rgb(0,255,0)'')</h5> <h5>Notes</h5><h5>For colors, you may use HTML color codes (ie 'green'), hex color codes (ie '#00FF00'), or rgb (ie 'rgb(0,255,0)'')</h5>
</div> </div>
<h5>Mana Symbol Codes:</h5> <h5>Mana Symbol Codes:</h5>

6
css/style-8.css
View File

@@ -216,6 +216,12 @@ a.underline {
.hidden { .hidden {
display: none; display: none;
} }
.fake-hidden {
opacity: 0;
position: absolute;
top: -100%;
left: -100%;
}
.margin-bottom { .margin-bottom {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }

20
js/creator-19.js
View File

@@ -109,11 +109,14 @@ function sizeCanvas(name, width = Math.round(card.width * (1 + 2 * card.marginX)
} }
window[name + 'Canvas'].width = width; window[name + 'Canvas'].width = width;
window[name + 'Canvas'].height = height; window[name + 'Canvas'].height = height;
// var label = document.createElement('p'); if (name == 'line') { //force true to view all canvases
// label.innerHTML = name; window[name + 'Canvas'].style = 'width: 20rem; height: 28rem; border: 1px solid red;';
// window[name + 'Canvas'].style = 'width: 20rem; height: 28rem; border: 1px solid red;'; const label = document.createElement('div');
// document.body.appendChild(window[name + 'Canvas']); label.innerHTML = name + '<br>If you can see this and don\'t want to, please clear you cache.';
// document.body.appendChild(label); label.appendChild(window[name + 'Canvas']);
label.classList = 'fake-hidden'; //Comment this out to view canvases
document.body.appendChild(label);
}
} }
//create main canvases //create main canvases
sizeCanvas('card'); sizeCanvas('card');
@@ -715,6 +718,10 @@ function writeText(textObject, targetContext) {
//Finish prepping canvases //Finish prepping canvases
paragraphContext.clearRect(0, 0, paragraphCanvas.width, paragraphCanvas.height); paragraphContext.clearRect(0, 0, paragraphCanvas.width, paragraphCanvas.height);
lineContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height); lineContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
lineCanvas.style.letterSpacing = textObject.kerning || '0px';
if (textFont == 'goudymedieval') {
lineCanvas.style.letterSpacing = '3.5px';
}
lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension; lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension;
lineContext.fillStyle = textColor; lineContext.fillStyle = textColor;
lineContext.shadowColor = textShadowColor; lineContext.shadowColor = textShadowColor;
@@ -850,6 +857,9 @@ function writeText(textObject, targetContext) {
manaSymbolColor = possibleCode.replace('manacolor', '') || 'white'; manaSymbolColor = possibleCode.replace('manacolor', '') || 'white';
} else if (possibleCode.includes('fixtextalign')) { } else if (possibleCode.includes('fixtextalign')) {
textAlign = realTextAlign; textAlign = realTextAlign;
} else if (possibleCode.includes('kerning')) {
lineCanvas.style.letterSpacing = possibleCode.replace('kerning', '') + 'px';
lineContext.font = lineContext.font; //necessary for the letterspacing update to be recognized
} else if (findManaSymbolIndex(possibleCode.replace('/', '')) > -1 || findManaSymbolIndex(possibleCode.replace('/', '').split('').reverse().join('')) > -1) { } else if (findManaSymbolIndex(possibleCode.replace('/', '')) > -1 || findManaSymbolIndex(possibleCode.replace('/', '').split('').reverse().join('')) > -1) {
possibleCode = possibleCode.replace('/', '') possibleCode = possibleCode.replace('/', '')
var manaSymbol; var manaSymbol;