diff --git a/rc3-2021/coco-decoration.png b/rc3-2021/coco-decoration.png new file mode 100644 index 0000000000000000000000000000000000000000..d9126ccff6751802fa968631365c08dd872041ae Binary files /dev/null and b/rc3-2021/coco-decoration.png differ diff --git a/tools/textGenerator/textGenerator.html b/tools/textGenerator/textGenerator.html index e1332a2f50bf6adadcf200c47c796e1ee0c5a8d7..602ec6887a82280a21d7eff1b56156175f35c319 100644 --- a/tools/textGenerator/textGenerator.html +++ b/tools/textGenerator/textGenerator.html @@ -41,6 +41,7 @@ function drawText () { var fontName = document.getElementById("fontName").value; var fontColors = document.getElementById("fontColor").value.split(','); + var outlineColors = document.getElementById("outlineColor").value.split(','); var marginTop = Number(document.getElementById("marginTop").value); var marginLeft = Number(document.getElementById("marginLeft").value); var fontSize = document.getElementById("fontSize").value; @@ -55,26 +56,44 @@ var row = 0; var column = 0; var colorIndex = 0; + var outlineColorIndex = 0; + canvasContext.imageSmoothingEnabled = false //Antialiasing aus canvasContext.font = fontInfo; canvasContext.fillStyle = fontColors[colorIndex]; - canvasContext.textAlign = "left"; - canvasContext.textBaseline = "hanging"; + canvasContext.textAlign = "center"; + //canvasContext.textBaseline = "hanging"; //Antialiasing-Killer canvasContext.clearRect(0, 0, canvas.width, canvas.height); + for(var n=0; n<lines.length; n++) { var x = (column * 128) + marginLeft; var y = (row * tileHeight) + marginTop; - + colorIndex++; if(colorIndex == fontColors.length){ colorIndex = 0; } - canvasContext.fillStyle = fontColors[colorIndex]; + outlineColorIndex++; + if(outlineColorIndex == outlineColors.length){ + outlineColorIndex = 0; + } - canvasContext.fillText(lines[n], x, y, 128-marginLeft); + // Draw an outline, if the outline field has any entries. + if (outlineColors[0].length > 0) { + canvasContext.fillStyle = outlineColors[outlineColorIndex]; + for (let dx=-1; dx<=1; dx++) { + for (let dy=-1; dy<=1; dy++) { + canvasContext.fillText(lines[n], x+dx+64, y+dy, 128-marginLeft); + } + } + } + + canvasContext.fillStyle = fontColors[colorIndex]; + canvasContext.fillText(lines[n], x+64, y, 128-marginLeft); + canvasContext.fillText(lines[n], x+64, y, 128-marginLeft); row++; if(row > maxRows) @@ -103,13 +122,16 @@ <label>Size</label> <input id="fontSize" value="8" style="width:3em"; /> px </div> <div class="setting"> - <label>Margin top</label> <input id="marginTop" value="17" style="width:3em"; /> px + <label>Margin top</label> <input id="marginTop" value="25" style="width:3em"; /> px + </div> + <div class="setting"> + <label>Margin left</label> <input id="marginLeft" value="17" style="width:3em"; /> px </div> <div class="setting"> - <label>Margin left</label> <input id="marginLeft" value="20" style="width:3em"; /> px + <label>Color</label> <input id="fontColor" value="#A7F8FF" style="width:28em"; /> </div> <div class="setting"> - <label>Color</label> <input id="fontColor" value="#ff1e88,#ee3aff,#79ffe4,#5cff78,#ffe378" style="width:28em"; /> + <label>Outline</label> <input id="outlineColor" value="#132FFF" style="width:28em"; /> </div> </form>