Leon Sans di Jongmin Kim

Leon Sans è un font straordinario! Un sans-serif geometrico realizzato interamente in codice (javascript) da Jongmin Kim. Ogni punto di disegno ha valori di coordinate che si possono modificare per creare forme, effetti o animazioni personalizzate.
Permette di manipolarla come un carattere variabile, per cambiare dinamicamente il peso del carattere. Ma soprattutto è possibile creare animazioni, effetti o forme personalizzate nell’elemento HTML5 <canvas>
. Ha disegnato il carattere per celebrare il suo neonato Leon.
Esempi



Per ulteriori esempi, consultare il repo Github di Leon Sans o il sito web leon-kim.com/examples/.
Si veda ad esempio l’effetto pioggia.
Utilizzo
Scaricare il file js minificato nella cartella dist e includerlo nell’html.
<script src="js/leon.js"></script>
Generare LeonSans e disegnarlo nell’elemento Canvas di HTML5.
this.canvas = document.createElement('canvas'); document.body.appendChild(this.canvas); this.ctx = this.canvas.getContext("2d"); this.leon = new LeonSans({ text: 'The quick brown\nfox jumps over\nthe lazy dog', color: ['#000000'], size: 160, weight: 200 }); requestAnimationFrame(animate); function animate(t) { requestAnimationFrame(animate); this.ctx.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight); const x = (document.body.clientWidth - this.leon.rect.w) / 2; const y = (document.body.clientHeight - this.leon.rect.h) / 2; this.leon.position(x, y); this.leon.draw(this.ctx); }
Elenco delle opzioni
Nome | Tipo | Descrizione |
---|---|---|
text
| stringa | Il testo che deve essere mostrato. |
size
| integratore | La dimensione del testo. |
weight | numero | Il peso del carattere: 1 - 900 . [Predefinito: 1 ] |
color | array | I colori di ogni personaggio. [Predefinito: ['#000000'] ] |
colorful | array | I colori per un effetto colorato. [Predefinito: ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31'] ] |
tracking | intero | La spaziatura tra i caratteri di un blocco di testo. [Predefinito: 0 ] |
leading | intero | La distanza tra ogni riga di testo. [Predefinito: 0 ] |
align | stringa | Come viene allineato orizzontalmente il contenuto del testo dell’elemento: left, center, right . [Predefinito: left ] |
pathGap | numero | Lo spazio tra le coordinate dei punti di una linea di ciascun carattere: 0 - 1 . [Predefinito: 0.5 ] |
amplitude | numero | L’ampiezza dell’effetto onda: 0 - 1 . [Predefinito: 0.5 ] |
maxWidth
| numero | La larghezza della frase di testo. |
breakWord | booleano | Le parole si interrompono quando raggiungono la fine di una riga. [Predefinito: false ] |
fps | numero | L’FPS per l’effetto onda. [Predefinito: 30 ] |
isPath | booleano | true per ottenere i valori delle coordinate dei punti sulla linea di ciascun carattere. [Predefinito: false ] |
isWave | booleano | true per l’effetto onda. [Predefinito: false ] |
Proprietà
Nome | Tipo | Descrizione |
---|---|---|
lineWidth
| numero | Lo spessore delle linee del carattere. |
scale | numero | La scala del carattere. scale è 1 quando la dimensione del carattere è 500 . |
drawing | array | I valori degli oggetti di disegno per ciascun personaggio. 0 è l’inizio dell’animazione, 1 è la fine dello stato di animazione. |
data
| array | Un oggetto con i dati grezzi del testo. |
paths
| array | I valori delle coordinate dei punti sulla linea di ciascun carattere. |
drawingPaths | array | I valori delle coordinate dei punti su una linea di ogni personaggio per disegnare l’animazione di disegno in WebGL. Ha una distanza di 1px per ogni percorso. |
wavePaths
| array | I valori delle coordinate dei punti su una linea per l’effetto onda. |
rect
| Oggetto | La dimensione del testo e la sua posizione: {x: x position, y: y position, w: width, h: height} . |
Metodi
Nome | Descrizione |
---|---|
on() | Aggiungere l’evento update . |
off() | Rimuovere l’evento update . |
position(x, y) | Imposta la posizione del testo. |
updateDrawingPaths() | Aggiornamento dei percorsi per il disegno in WebGL (PIXI.js). È molto costoso, si chiama solo quando ha bisogno. |
drawPixi(graphics) | Disegnare testo in WebGL con PIXI.js. |
draw(ctx) | Disegna il testo nell’elemento Tela. |
drawColorful(ctx) | Disegnare l’effetto colorato. |
wave(ctx, t) | Disegnare l’effetto onda. |
pattern(ctx, w, h) | Disegnare forme di rettangolo in ogni punto del percorso |
grid(ctx) | Disegnare la griglia per ogni tipo. |
point(ctx) | Disegnare cerchi in ogni punto del disegno e linee per ogni tipo. |
box(ctx) | Disegnare un riquadro di contorno per il testo. |
reset() | Azzeramento di tutti i valori. |
destroy() | Distruggere. |