From 948ebaf0f438af51919a2165606e281aa6828332 Mon Sep 17 00:00:00 2001 From: Vitor Duarte Date: Tue, 2 Jun 2020 22:00:03 -0300 Subject: [PATCH] =?utf8?q?Atualiza=20a=20gera=C3=A7ao=20do=20logo=20para?= =?utf8?q?=20usar=20canvas?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- dist/circletext.js | 105 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 28 +++--------- styles.css | 9 ++-- 3 files changed, 114 insertions(+), 28 deletions(-) create mode 100644 dist/circletext.js diff --git a/dist/circletext.js b/dist/circletext.js new file mode 100644 index 0000000..b3b6675 --- /dev/null +++ b/dist/circletext.js @@ -0,0 +1,105 @@ +function writeBottomCircle(text, canvaId, diameter) { + var canvas = document.getElementById(canvaId); + writeCircularText( + text.toUpperCase(), + canvas, + diameter, + 180, + 'center', + '40', + 'Roboto', + 0, + 0 + ); +} + +function writeTopCircle(text, canvaId, diameter) { + var canvas = document.getElementById(canvaId); + writeCircularText( + text.toUpperCase(), + canvas, + diameter, + 0, + 'center', + '40', + 'Roboto', + 1, + 0 + ); +} + +function writeCircularText( + text, + mainCanvas, + diameter, + startAngle, + align, + fontSize, + fontFamily, + inwardFacing, + kerning +) { + // declare and intialize canvas, reference, and useful variables + align = align.toLowerCase(); + var ctxRef = mainCanvas.getContext('2d'); + // ctx.resetTransform(); + var clockwise = align == 'right' ? 1 : -1; // draw clockwise for aligned right. Else Anticlockwise + startAngle = startAngle * (Math.PI / 180); // convert to radians + + // calculate height of the font. Many ways to do this + // you can replace with your own! + var textHeight = 60; + + // set text attributes + ctxRef.font = `${fontSize}px ${fontFamily}`; + ctxRef.fillStyle = 'white'; + + // Reverse letters for align Left inward, align right outward + // and align center inward. + if ( + (['left', 'center'].indexOf(align) > -1 && inwardFacing) || + (align == 'right' && !inwardFacing) + ) + text = text.split('').reverse().join(''); + + // Setup letters and positioning + ctxRef.translate(diameter / 2 - 5, diameter / 2); // Move to center + startAngle += Math.PI * !inwardFacing; // Rotate 180 if outward + ctxRef.textBaseline = 'middle'; // Ensure we draw in exact center + ctxRef.textAlign = 'center'; // Ensure we draw in exact center + + // rotate 50% of total angle for center alignment + if (align == 'center') { + for (var j = 0; j < text.length; j++) { + var charWid = ctxRef.measureText(text[j]).width; + startAngle += + ((charWid + (j == text.length - 1 ? 0 : kerning)) / + (diameter / 2 - textHeight) / + 2) * + -clockwise; + } + } + + // Phew... now rotate into final start position + ctxRef.rotate(startAngle); + + // Now for the fun bit: draw, rotate, and repeat + for (var j = 0; j < text.length; j++) { + var charWid = ctxRef.measureText(text[j]).width; // half letter + // rotate half letter + ctxRef.rotate((charWid / 2 / (diameter / 2 - textHeight)) * clockwise); + // draw the character at "top" or "bottom" + // depending on inward or outward facing + + ctxRef.fillText( + text[j], + 0, + (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2) + ); + + ctxRef.rotate( + ((charWid / 2 + kerning) / (diameter / 2 - textHeight)) * clockwise + ); // rotate half letter + } + ctxRef.resetTransform(); +} diff --git a/index.html b/index.html index 080b27e..83834df 100644 --- a/index.html +++ b/index.html @@ -4,35 +4,19 @@ - + Antifa Generator - + diff --git a/styles.css b/styles.css index eab469c..56122f5 100644 --- a/styles.css +++ b/styles.css @@ -1,16 +1,14 @@ -.logo { +#logo { display: flex; justify-items: center; background-image: url('img/antifascist-action.svg'); background-repeat: no-repeat; - height: 1000px; - width: 1000px; } .logo-text { display: flex; margin: 0; - color: white; + color: red; font-size: 80px; padding: 1%; font-family: 'Roboto', sans-serif; @@ -18,10 +16,9 @@ } #top-text { - padding-left: 50%; } #bottom-text { /* padding-top: 80%; */ - align-self: flex-end; + /* align-self: flex-end; */ } -- 2.44.0