sebastian
/
fedidwgugl-generator
mirror of https://github.com/LongHairedHacker/fedidwgugl-generator.git
1
0
Fork 0
Code Issues Releases Wiki Activity

New approach to font loading

This commit is contained in:
Sebastian 2017-06-25 00:58:44 +02:00
parent 213f306b43
commit ba244ff1c5
6 changed files with 6357 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/font/DejaVuSans-webfont.eot Normal file
View File

Binary file not shown.

6282
css/font/DejaVuSans-webfont.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
css/font/DejaVuSans-webfont.ttf Normal file
View File

Binary file not shown.

0
DejaVuSans-webfont.woff → css/font/DejaVuSans-webfont.woff
View File

11
css/font/font.css Normal file
View File

@ -0,0 +1,11 @@
@font-face {
font-family: 'DejaVu Sans Book';
src: url('DejaVuSans-webfont.eot');
src: url('DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('DejaVuSans-webfont.woff') format('woff'),
url('DejaVuSans-webfont.ttf') format('truetype'),
url('DejaVuSans-webfont.svg#dejavu_sansbook') format('svg');
font-weight: normal;
font-style: normal;
}

126
index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>#fedidwgugl Generator</title> <title>#fedidwgugl Generator</title>
<link rel="stylesheet" href="css/font/font.css">
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/milligram.min.css"> <link rel="stylesheet" href="css/milligram.min.css">
@ -16,10 +17,13 @@
background-color: #282727; background-color: #282727;
border-color: #282727; border-color: #282727;
} }
.invisible-font-loader {
font-family: 'DejaVu Sans Book';
}
</style> </style>
</head> </head>
<body> <body>
<div style="font-family: Dejavu Sans Book;"> </div>
<br/> <br/>
<br/> <br/>
<div class="row"> <div class="row">
@ -42,80 +46,79 @@
<div class="row"> <div class="row">
<div class="column column-33 column-offset-33"> <div class="column column-33 column-offset-33">
<small> <small>
Der Betrieber dieses Generators distanziert sich ausdrücklich von der Der Betreiber dieses Generators distanziert sich ausdrücklich von der
Partei CDU, deren politischen Inhalten und ihrer miserablen PR-Abteilung. Partei CDU, deren politischen Inhalten und ihrer miserablen PR-Abteilung.
Der Gebrauch dieses Generators zu Wahlkampfzwecken Der Gebrauch dieses Generators zu Wahlkampfzwecken
(unabhängig von der Partei) ist nicht gestattet. (unabhängig von der Partei) ist nicht gestattet.
</small> </small>
</div> </div>
</div> </div>
</div>
<script type="text/javascript"> <div class="invisible-font-loader">&nbsp;</div>
(function() {
var boxOversize = 50;
var boxSpacing = 75;
var textHeight = 90;
var canvas = document.getElementById('canvas'); <script type="text/javascript">
var ctx = canvas.getContext('2d'); (function() {
var boxOversize = 50;
var boxSpacing = 75;
var textHeight = 90;
var background = new Image(); var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var sloganField = document.getElementById('slogan-field'); var background = new Image();
var saveButton = document.getElementById('save-button');
function redraw() { var sloganField = document.getElementById('slogan-field');
ctx.drawImage(background, 0, 0); var saveButton = document.getElementById('save-button');
var slogan = sloganField.value; function redraw() {
if(slogan === "") { ctx.drawImage(background, 0, 0);
slogan = sloganField.placeholder;
var slogan = sloganField.value;
if(slogan === "") {
slogan = sloganField.placeholder;
}
ctx.font = 'bold ' + textHeight + 'px DejaVu Sans Book';
ctx.textBaseline = 'middle';
var lines = slogan.split('\n');
totalTextHeight = lines.length * (textHeight + boxOversize + boxSpacing);
textStartY = canvas.height / 2 - totalTextHeight / 2;
for(lineNum = 0; lineNum < lines.length; lineNum++) {
var line = lines[lineNum];
var textWidth = ctx.measureText(line).width;
console.log(textWidth);
textX = canvas.width / 2 - textWidth / 2;
textY = textStartY + lineNum * (textHeight + boxOversize + boxSpacing / 2) +
(textHeight + boxOversize + boxSpacing) / 2;
boxPosX = textX - boxOversize / 2;
boxWidth = textWidth + boxOversize;
boxPosY = textY - (textHeight + boxOversize) / 2;
boxHeight = textHeight + boxOversize;
ctx.fillStyle = 'white';
ctx.fillRect(boxPosX, boxPosY, boxWidth, boxHeight);
ctx.fillStyle = 'black';
ctx.fillText(line, textX, textY);
}
} }
ctx.font = 'bold ' + textHeight + 'px Dejavu Sans Book'; function saveCanvas() {
ctx.textBaseline = 'middle'; redraw();
this.href= canvas.toDataURL('image/png');
var lines = slogan.split('\n');
totalTextHeight = lines.length * (textHeight + boxOversize + boxSpacing);
textStartY = canvas.height / 2 - totalTextHeight / 2;
for(lineNum = 0; lineNum < lines.length; lineNum++) {
var line = lines[lineNum];
var textWidth = ctx.measureText(line).width;
console.log(textWidth);
textX = canvas.width / 2 - textWidth / 2;
textY = textStartY + lineNum * (textHeight + boxOversize + boxSpacing / 2) +
(textHeight + boxOversize + boxSpacing) / 2;
boxPosX = textX - boxOversize / 2;
boxWidth = textWidth + boxOversize;
boxPosY = textY - (textHeight + boxOversize) / 2;
boxHeight = textHeight + boxOversize;
ctx.fillStyle = 'white';
ctx.fillRect(boxPosX, boxPosY, boxWidth, boxHeight);
ctx.fillStyle = 'black';
ctx.fillText(line, textX, textY);
} }
}
function saveCanvas() {
redraw();
this.href= canvas.toDataURL('image/png');
}
background.addEventListener('load', function() { background.addEventListener('load', function() {
var DejavuSansBook = new FontFace('Dejavu Sans Book', 'url(DejaVuSans-webfont.woff)');
DejavuSansBook.load().then(function() {
canvas.width = background.width; canvas.width = background.width;
canvas.height = background.height; canvas.height = background.height;
@ -125,11 +128,10 @@
saveButton.addEventListener('click', saveCanvas, false); saveButton.addEventListener('click', saveCanvas, false);
redraw(); redraw();
}); }, false);
}, false);
background.src = 'background.png' background.src = 'background.png'
})(); })();
</script> </script>
</body> </body>
</html> </html>