mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
set symbols
This commit is contained in:
64
data/site/other/setSymbol/setSymbol.js
Normal file
64
data/site/other/setSymbol/setSymbol.js
Normal file
@@ -0,0 +1,64 @@
|
||||
var svg = document.getElementById('displaySVG');
|
||||
var svgWidth = 500, svgHeight = 500, setSymbolWidth = 300, setSymbolHeight = 300;
|
||||
var svgStroke = svg.children[1]
|
||||
var svgFill = svg.children[2]
|
||||
svg.setAttribute('width', svgWidth);
|
||||
svg.setAttribute('height', svgHeight);
|
||||
fetchSVGData('rtr');
|
||||
|
||||
function fetchSVGData(setCode) {
|
||||
var url = 'https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/' + setCode + '.svg';
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4) {
|
||||
setSymbolPath = xhttp.responseText.split('d="')[1].split('"></path>')[0];
|
||||
svgStroke.setAttribute('d', setSymbolPath);
|
||||
svgFill.setAttribute('d', setSymbolPath);
|
||||
var svgPathBoundingBox = svgStroke.getBBox();
|
||||
if (svgPathBoundingBox.width > svgPathBoundingBox.height) {
|
||||
scaleAmount = setSymbolWidth / svgPathBoundingBox.width;
|
||||
} else {
|
||||
scaleAmount = setSymbolHeight / svgPathBoundingBox.height;
|
||||
}
|
||||
svgStroke.setAttribute('transform', 'scale(' + scaleAmount + ') translate(' + parseFloat(((svgWidth - svgPathBoundingBox.width * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.x) + ', ' + parseFloat(((svgHeight - svgPathBoundingBox.height * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.y) + ')');
|
||||
svgFill.setAttribute('transform', 'scale(' + scaleAmount + ') translate(' + parseFloat(((svgWidth - svgPathBoundingBox.width * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.x) + ', ' + parseFloat(((svgHeight - svgPathBoundingBox.height * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.y) + ')');
|
||||
decorateSVG();
|
||||
}
|
||||
}
|
||||
xhttp.open('GET', url, true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
function decorateSVG() {
|
||||
var setSymbolGradient = document.getElementById('inputSetSymbolRarity').value;
|
||||
var setSymbolStrokeColor = 'black';
|
||||
if (setSymbolGradient == 'Common') {
|
||||
setSymbolStrokeColor = 'white'
|
||||
}
|
||||
svgStroke.setAttribute('stroke', setSymbolStrokeColor)
|
||||
svgFill.setAttribute('fill', 'url(#grad' + setSymbolGradient + ')');
|
||||
}
|
||||
|
||||
function downloadSetSymbolImage(linkElement) {
|
||||
// var setSymbolDownload = cardFinalCanvas.toDataURL()
|
||||
// linkElement.href = setSymbolDownload
|
||||
var serializer = new XMLSerializer();
|
||||
var source = serializer.serializeToString(svg);
|
||||
|
||||
//add name spaces.
|
||||
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
|
||||
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
}
|
||||
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
|
||||
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
|
||||
}
|
||||
|
||||
//add xml declaration
|
||||
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
|
||||
|
||||
//convert svg source to URI data scheme.
|
||||
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
|
||||
|
||||
//set url value to a element's href attribute.
|
||||
linkElement.href = url;
|
||||
}
|
Reference in New Issue
Block a user