한용파 위키

test

2026-04-04 12:16:21 hanyongpa

− # PAFont Usage
+ # paFont Usage
− `PAFont`는 폰트를 텍스트 렌더러가 아니라 도형 생성기로 다루는 유틸리티입니다.
+ `paFont`는 폰트를 텍스트 렌더러가 아니라 도형 생성기로 다루는 유틸리티입니다.
현재 public entry:
− - `src/paFont/index.js`
+ - `src/paFont.js`
- 내부 구현:
+ - `src/paFont/paFont.js`
- `src/paFont/core.js`
- `src/paFont/shape.js`
새 API는 shape 중심으로 동작합니다.
− 1. `PAFont.load(...)`로 폰트를 로드합니다.
+ 1. `paFont.load(...)`로 폰트를 로드합니다.
2. `font.text(...)` 또는 `font.glyph(...)`로 `PAShape`를 만듭니다.
3. `shape.toShape(...)`, `shape.toRegions(...)`, `shape.toPoints(...)` 중 필요한 결과를 꺼냅니다.
+
+ 문단이 필요할 때는:
+
+ 1. `font.paragraph(...)`로 `paParagraph`를 만듭니다.
+ 2. `paragraph.drawText(ctx)`로 canvas 텍스트를 그립니다.
+ 3. 필요하면 `paragraph.toShape()`, `paragraph.toRegions()`, `paragraph.toPoints()`로 같은 레이아웃을 geometry로 바꿉니다.
모든 변환 옵션은 절대 좌표 단위입니다.
```js
− import PAFont from "./src/paFont/index.js";
+ import paFont from "./src/paFont.js";
− const font = await PAFont.load("/assets/font.otf");
+ const font = await paFont.load("/assets/font.otf");
```
```js
− import PAFont from "./src/paFont/index.js";
+ import paFont from "./src/paFont.js";
− const font = await PAFont.load("./font.otf", {
+ const font = await paFont.load("./font.otf", {
base: import.meta.url,
});
```js
const url = new URL("./font.otf", import.meta.url);
− const font = await PAFont.load(url);
+ const font = await paFont.load(url);
```
```js
import { readFile } from "node:fs/promises";
− import PAFont from "./src/paFont/index.js";
+ import paFont from "./src/paFont.js";
const bytes = await readFile("./fonts/font.otf");
− const font = await PAFont.load(bytes);
+ const font = await paFont.load(bytes);
```
- 브라우저에서 plain string 경로는 현재 페이지 URL 기준으로 해석됩니다.
- 모듈 파일 기준 상대 경로를 쓰고 싶으면 `{ base: import.meta.url }`를 써야 합니다.
− - 폰트 URL이 HTML을 돌려주면 `PAFont.load()`는 원인과 해결책을 포함한 에러를 던집니다.
+ - 폰트 URL이 HTML을 돌려주면 `paFont.load()`는 원인과 해결책을 포함한 에러를 던집니다.
## Font API
console.log(metrics.width);
console.log(metrics.bbox);
+ ```
+
+ ### `font.paragraph(value, options)`
+
+ `pretext.js` 기반 문단 레이아웃 객체를 만듭니다.
+
+ ```js
+ const paragraph = font.paragraph("문단입니다.", {
+ x: 40,
+ y: 80,
+ width: 420,
+ size: 32,
+ fontFamily: "MyFont",
+ lineHeight: 1.4,
+ });
+
+ paragraph.drawText(ctx);
+
+ const shape = paragraph.toShape();
+ const regions = paragraph.toRegions({ step: 6, openWidth: 1 });
```
+
+ 옵션 요약:
+
+ - `width`: 필수 문단 폭
+ - `lineHeight`: `1.4` 같은 배수 또는 `44` 같은 절대 px
+ - `fontFamily`, `fontWeight`, `fontStyle`, `font`: canvas 측정/렌더링용 폰트 설정
+ - `align`: `left`, `center`, `right`, `justify`
+ - `whiteSpace`: `normal`, `pre-wrap`, `nowrap`
+ - `engine`: `pretext`, `native`
+
+ 메서드:
+
+ - `paragraph.relayout({ width })`
+ - `paragraph.drawText(ctx, { fillStyle, strokeStyle, fill, stroke })`
+ - `paragraph.toShape({ layout, step, openWidth })`
+ - `paragraph.toRegions({ layout, step, openWidth })`
+ - `paragraph.toPoints({ layout, step, openWidth, includeHoles })`
## PAShape API