leonsans - GitLite

KO | EN

gitlite — search

#python #typescript #llm #go #rust #deep-learning #docker #macos #nodejs #java #cli #awesome-list #mcp #openai

leonsans

(★ 10,172)

Leon Sans는 2019년에 김종민(Jongmin Kim)이 코드로 제작한 기하학적 산세리프 서체입니다.

파일 탐색기

최종 버전 다운로드 (.zip)

- leon.js
- - branch_circle.png
  - branch_long.png
  - drop-alpha.png
  - flower1.png
  - flower2.png
  - flower3.png
  - leaf1.png
  - leaf2.png
  - tile1.png
  - tile2.png
  - tile3.png
  - tile4.png
  - tile5.png
  - tile6.png
- - util.js
- all.html
- canvas-basic.html
- color-pattern.html
- colorful.html
- gradient.html
- grid.html
- index.html
- mask-tiling-pixi.html
- metaball-pixi.html
- morphing-pixi.html
- pattern.html
- plants-pixi.html
- wave.html
- webgl-basic-pixi.html
- - align.js
  - dispatcher.js
  - group.js
  - guide.js
  - length.js
  - model.js
  - paths.js
  - point.js
  - util.js
  - vector.js
- - index.js
  - latin.js
  - latinutil.js
  - lower.js
  - number.js
  - special.js
  - upper.js
  - util.js
- index.js
- leonsans.js
.gitignore
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Leon Sans
Leon Sans는 2019년 김종민이 코드로 제작한 기하학적 산세리프 서체입니다. 폰트의 굵기를 동적으로 변경할 수 있으며, HTML5의 Canvas 요소 안에서 커스텀 애니메이션, 효과, 또는 도형을 만들 수 있습니다. 그는 새로 태어난 아들 레온(Leon)을 기념하기 위해 이 폰트를 디자인했습니다.
라이브 예시는 https://leon-kim.com/examples/ 에서 확인할 수 있습니다.
그리고 웹사이트 주소는 https://leon-kim.com/ 입니다.
[![Video Label](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/leon-youtube.jpg)](https://youtu.be/sb7v-d-R11E?hl=en&fs=1&cc\_load\_policy=1)
![uppercase](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/upper.gif)
![lowercase](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/lower.gif)
![number](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/number-special.gif)
![latin upper](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/latin-upper.gif)
![latin lower](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/latin-lower.gif)
## 무엇이 특별한가요?
이 폰트는 코드로 만들어졌으며, 각 글리프를 그리기 위한 드로잉 포인트의 좌표값을 가지고 있습니다. 이 좌표값을 사용하여 커스텀 도형, 효과 또는 애니메이션을 만들 수 있습니다.
![Drawing animation](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/drawing.gif)
- [Drawing animation](https://leon-kim.com/examples/#canvas-basic)
![Weight change](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/weight.gif)
- [Weight change](https://leon-kim.com/examples/#canvas-basic)
![Wave](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/wave.gif)
- [Wave](https://leon-kim.com/examples/#wave)
![Metaball](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/metaball.gif)
- [Metaball](https://leon-kim.com/examples/#metaball-pixi)
![Plant](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/plant.gif)
- [Plant](https://leon-kim.com/examples/#plants-pixi)
![Colorful](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/colorful.gif)
- [Colorful](https://leon-kim.com/examples/#colorful)
![Color pattern](https://raw.githubusercontent.com/cmiscm/leonsans/gh-pages/screenshot/colorpattern.gif)
- [Color pattern](https://leon-kim.com/examples/#color-pattern)
## 사용법
dist 폴더에 있는 축소된(minified) js 파일을 다운로드하여 html에 포함하세요.
```html
```
LeonSans를 생성하고 HTML5의 Canvas 요소에 그립니다.
```javascript
let leon, canvas, ctx;
const sw = 800;
const sh = 600;
const pixelRatio = 2;
function init() {
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext("2d");
canvas.width = sw \* pixelRatio;
canvas.height = sh \* pixelRatio;
canvas.style.width = sw + 'px';
canvas.style.height = sh + 'px';
ctx.scale(pixelRatio, pixelRatio);
leon = new LeonSans({
text: 'The quick brown\nfox jumps over\nthe lazy dog',
color: ['#000000'],
size: 80,
weight: 200
});
requestAnimationFrame(animate);
}
function animate(t) {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, sw, sh);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x, y);
leon.draw(ctx);
}
window.onload = () => {
init();
};
```
드로잉 애니메이션을 위해 html에 TweenMax (JS 애니메이션 라이브러리)를 포함하세요.
```html
```
그리고 모든 드로잉 값을 0에서 1로 업데이트합니다.
```javascript
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
TweenMax.fromTo(leon.drawing[i], 1.6, {
value: 0
}, {
delay: i \* 0.05,
value: 1,
ease: Power4.easeOut
});
}
```
### 옵션 목록
| 이름 | 형식 | 설명 |
| -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text` | string | 표시해야 할 텍스트입니다. |
| `size` | integer | 텍스트의 크기입니다. |
| `weight` | number | 폰트의 굵기입니다: `1 -

900`. [기본값: `1`] |
| `color` | array | 각 글자의 색상입니다. [기본값: `['#000000']`] |
| `colorful` | array | 알록달록한 효과를 위한 색상입니다. [기본값: `['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31']`] |
| `tracking` | integer | 텍스트 블록의 글자 간격입니다. [기본값: `0`] |
| `leading` | integer | 텍스트의 각 줄 사이의 거리입니다. [기본값: `0`] |
| `align` | string | 요소의 텍스트 콘텐츠가 수평으로 정렬되는 방식: `left, center, right`. [기본값: `left`] |
| `pathGap` | number | 각 글자의 선 위에 있는 점들의 좌표 간격: `0 - 1`. [기본값: `0.5`] |
| `amplitude` | number | 웨이브 효과의 진폭: `0 - 1`. [기본값: `0.5`] |
| `maxWidth` | number | 텍스트 문장의 너비입니다. |
| `breakWord` | boolean | 줄의 끝에 도달했을 때 단어를 나눌지 여부입니다. [기본값: `false`] |
| `fps` | number | 웨이브 효과의 FPS입니다. [기본값: `30`] |
| `isPath` | boolean | 각 글자의 선에 있는 점들의 좌표 값을 얻으려면 `true`로 설정합니다. [기본값: `false`] |
| `isWave` | boolean | 웨이브 효과를 주려면 `true`로 설정합니다. [기본값: `false`] |
### Properties
| Name | Type | Description |
| -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `lineWidth` | number | 글자 선의 두께입니다. |
| `scale` | number | 글자의 크기 배율입니다. 폰트 크기가 `500`일 때 `scale`은 `1`입니다. |
| `drawing` | array | 각 글자의 드로잉 객체 값입니다. `0`은 애니메이션의 시작을 의미하고, `1`은 애니메이션 상태의 끝을 의미합니다. |
| `data` | array | 텍스트의 원본 데이터 객체입니다. |
| `paths` | array | 각 글자의 선 위에 있는 점들의 좌표 값입니다. |
| `drawingPaths` | array | WebGL에서 드로잉 애니메이션을 그리기 위한, 각 글자의 선 위에 있는 점들의 좌표 값입니다. 각 패스마다 1px의 거리를 가집니다. |
| `wavePaths` | array | 웨이브 효과를 위한 선 위 점들의 좌표 값입니다. |
| `rect` | Object | 텍스트의 크기와 위치: `{x: x 위치, y: y 위치, w: 너비, h: 높이}`.|
### Methods
| Name | Description |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `on()` | `update` 이벤트를 추가합니다. |
| `off()` | `update` 이벤트를 제거합니다. |
| `position(x, y)` | 텍스트의 위치를 설정합니다. |
| `updateDrawingPaths()` | WebGL (PIXI.js)에서 그리기 위한 패스를 업데이트합니다. 연산 비용이 매우 크므로 필요한 경우에만 호출하세요. |
| `drawPixi(graphics)` | PIXI.js를 사용하여 WebGL에 텍스트를 그립니다. |
| `draw(ctx)` | Canvas 요소에 텍스트를 그립니다. |
| `drawColorful(ctx)` | 알록달록한 효과를 그립니다. |
| `wave(ctx, t)` | 웨이브 효과를 그립니다. |
| `pattern(ctx, w, h)` | 각 패스 지점에 사각형 모양을 그립니다. |
| `grid(ctx)` | 각 타입에 대한 그리드를 그립니다. |
| `point(ctx)` | 각 드로잉 지점에 원을 그리고 각 타입에 대한 선을 그립니다. |
| `box(ctx)` | 텍스트의 외곽선 상자를 그립니다. |
| `reset()` | 모든 값을 초기화합니다. |
| `dispose()` | 리소스를 해제합니다. |