flatten tolerance

브라우저·편집기는 곡선 d를 그릴 때 내부적으로 polyline으로 근사합니다. stepsPerCurve는 “곡선 하나당 몇 개의 t 샘플을 찍을지”를 정하는 고정 step flatten입니다.

데모 path

M 80 320 Q 200 40 360 320 T 560 120

• 회색 stroke — 원본 path (Q + smooth T)
• 파란 점 — flattenPathSegments 결과
• toolbar stepsPerCurve 2–48 (기본 12)

step을 줄이면 점 개수↓·빠름·stroke/fill/hit 오차↑. step을 늘리면 반대.

uniform flatten API

import { flattenPathSegments, parsePathD } from "svg-matrix-core";

const segments = parsePathD(pathD);
const polyline = flattenPathSegments(segments, {
  stepsPerCurve: 12,
  stepsPerArc: 24      // A segment → arcSegmentToCubics 후 샘플
});

segment별 동작

t = 0, 1/n, 2/n, …, 1  (끝점 중복 — polyline edge)

무엇이 flatten에 의존하나

adaptive — 다른 멈춤 조건

같은 목표(폴리라인)에 점 개수를 줄이는 방법:

import { flattenPathSegmentsAdaptive } from "svg-matrix-core";

flattenPathSegmentsAdaptive(segments, { tolerance: 0.5 });

급격히 휘는 구간만 촘촘히 — 068 subdivide와 짝.

언제 무엇을 쓰나

Core API

• flattenPathSegments — index.js
• flattenPathSegmentsAdaptive, flattenCubicAdaptive — engine.js
• cubicFlatnessError, subdivideCubicBezier — geometry.js

관련

• 017 length · 018 point at length

오늘의 핵심

고정 step vs adaptive의 차이는 “몇 점”이 아니라 언제 멈추느냐입니다. 016 데모 슬라이더로 오차–성능 trade-off를 눈으로 확인하세요.