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.