Leon Sans autorstwa Jongmin Kim

Leon Sans to niesamowita czcionka! Geometryczny sans-serif wykonany w całości w kodzie (javascript) przez Jongmin Kim. Każdy rysunek ma wartości współrzędnych, które można modyfikować, aby tworzyć niestandardowe kształty, efekty lub animacje.

Pozwala to manipulować nim jak zmienną czcionką, dynamicznie zmieniać wagę czcionki. Ale więcej niż to, że możesz tworzyć niestandardowe animacje, efekty lub kształty w elemencie HTML5 <canvas>. Zaprojektował czcionkę, aby uczcić swoje nowo narodzone dziecko Leon.

Przykłady

Zobacz więcej przykładów na repo Leon Sans Github lub na stronie internetowej pod adresem leon-kim.com/examples/

Sprawdź na przykład efekt deszczu.

Zastosowanie

Pobierz zminifikowany plik js w folderze dist i dołącz go do swojego html

<script src="js/leon.js"></script>

Wygeneruj LeonSans i narysuj go w elemencie Canvas w 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);
}

Lista opcji

Nazwa	Typ	Opis
text	string	Tekst, który ma być wyświetlony.
size	integer	Rozmiar tekstu.
weight	numer	Waga czcionki: 1 - 900. [Default: 1]
color	macierz	Kolory poszczególnych postaci. [Default: ['#000000']]
colorful	macierz	Kolory dla uzyskania efektu kolorystycznego. [Default: ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31']]
tracking	liczba całkowita	Odstępy między znakami bloku tekstu. [Default: 0]
leading	liczba całkowita	Odległość pomiędzy poszczególnymi liniami tekstu. [Default: 0]
align	ciąg	Sposób wyrównania zawartości tekstowej elementu w poziomie: left, center, right. [Default: left]
pathGap	numer	Odstęp między każdą współrzędną punktów na linii każdego znaku: 0 - 1. [Default: 0.5]
amplitude	numer	Amplituda efektu falowego: 0 - 1. [Default: 0.5]
maxWidth	numer	Szerokość zdania tekstowego.
breakWord	boolean	Słowa łamią się po osiągnięciu końca linii. [Default: false]
fps	numer	FPS dla efektu fali. [Default: 30]
isPath	boolean	true aby uzyskać wartości współrzędnych punktów na linii każdego znaku. [Default: false]
isWave	boolean	true dla efektu fali. [Default: false]

 

Właściwości

Nazwa	Typ	Opis
lineWidth	numer	Grubość linii znaku.
scale	numer	Skala znaku. scale to 1 gdy rozmiar czcionki wynosi 500.
drawing	array	Wartości obiektów rysunkowych dla każdej postaci. 0 to początek animacji, 1 to koniec stanu animacji.
data	array	Obiekt surowych danych dla danego tekstu.
paths	tablica	Wartości współrzędnych punktów na linii każdego znaku.
drawingPaths	macierz	Wartości współrzędnych punktów na linii każdej postaci do rysowania animacji rysunkowej w WebGL. Posiada 1px odległości każdej ścieżki.
wavePaths	array	Wartości współrzędnych punktów na prostej dla efektu fali.
rect	Obiekt	Rozmiar tekstu i jego położenie: {x: x position, y: y position, w: width, h: height}.

 

Metody

Nazwa	Opis
on()	Dodaj wydarzenie update.
off()	Usunięcie zdarzenia update.
position(x, y)	Ustawienie pozycji tekstu.
updateDrawingPaths()	Aktualizacja ścieżek do rysowania w WebGL (PIXI.js). Jest bardzo drogi, dzwoni tylko wtedy, gdy potrzebuje.
drawPixi(graphics)	Rysuj tekst w WebGL za pomocą PIXI.js.
draw(ctx)	Rysuje tekst w elemencie Canvas.
drawColorful(ctx)	Narysuj kolorowy efekt.
wave(ctx, t)	Narysuj efekt fali.
pattern(ctx, w, h)	Narysuj prostokątne kształty w każdym punkcie ścieżki
grid(ctx)	Narysuj siatkę dla każdego typu.
point(ctx)	Narysuj okręgi w każdym punkcie rysunkowym i linie dla każdego typu.
box(ctx)	Narysuj pole konturu dla tekstu.
reset()	Wyzerować wszystkie wartości.
destroy()	Zniszcz.