Leon Sans autorstwa Jongmin Kim

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

Animacja rysunkowa
Zmiana wagi
Kolorowe

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

NazwaTypOpis
text stringTekst, który ma być wyświetlony.
size integerRozmiar tekstu.
weightnumerWaga czcionki: 1 - 900. [Default: 1]
colormacierzKolory poszczególnych postaci. [Default: ['#000000']]
colorfulmacierzKolory dla uzyskania efektu kolorystycznego. [Default: ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31']]
trackingliczba całkowitaOdstępy między znakami bloku tekstu. [Default: 0]
leadingliczba całkowitaOdległość pomiędzy poszczególnymi liniami tekstu. [Default: 0]
alignciągSposób wyrównania zawartości tekstowej elementu w poziomie: left, center, right. [Default: left]
pathGapnumerOdstęp między każdą współrzędną punktów na linii każdego znaku: 0 - 1. [Default: 0.5]
amplitudenumerAmplituda efektu falowego: 0 - 1. [Default: 0.5]
maxWidth numerSzerokość zdania tekstowego.
breakWordbooleanSłowa łamią się po osiągnięciu końca linii. [Default: false]
fpsnumerFPS dla efektu fali. [Default: 30]
isPathbooleantrue aby uzyskać wartości współrzędnych punktów na linii każdego znaku. [Default: false]
isWavebooleantrue dla efektu fali. [Default: false]

 

Właściwości

NazwaTypOpis
lineWidth numerGrubość linii znaku.
scalenumerSkala znaku. scale to 1 gdy rozmiar czcionki wynosi 500.
drawingarrayWartości obiektów rysunkowych dla każdej postaci. 0 to początek animacji, 1 to koniec stanu animacji.
data arrayObiekt surowych danych dla danego tekstu.
paths tablicaWartości współrzędnych punktów na linii każdego znaku.
drawingPathsmacierzWartoś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 arrayWartości współrzędnych punktów na prostej dla efektu fali.
rect ObiektRozmiar tekstu i jego położenie: {x: x position, y: y position, w: width, h: height}.

 

Metody

NazwaOpis
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.
20 września 2019 Leon Sans teraz zawiera format .otf
Pobieraj tylko czcionki .oft
Category
Language support
Format
JS
License
MIT License    → Licenses explained
Tags
Author