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. |