fix(study): canvas stroke 색을 --text 토큰으로 + simulatePressure true
문제: dark mode 에서 stroke #111 이 --bg #0f1117 와 거의 같아 안 보임 + Apple Pencil pressure 0 케이스 방어 부재. 수정: - strokeColor 를 마운트 시 --text 토큰 실측 (e4e4e7 등) 으로 갱신 - simulatePressure true 로 변경 — 압력 0 으로 들어와도 속도 기반으로 굵기 보장 - thinning 0.55 → 0.5
This commit is contained in:
@@ -61,6 +61,7 @@
|
||||
let undoStack = $state<Stroke[]>([]); // 삭제된 stroke 들 (redo 용)
|
||||
let inflight: Stroke | null = $state(null); // 진행 중 stroke (포인터 떼기 전)
|
||||
let activePointerId: number | null = null;
|
||||
let strokeColor = $state('#e4e4e7'); // 기본은 dark mode 의 --text. 마운트 시 실측으로 갱신
|
||||
|
||||
let isDirty = $state(false);
|
||||
let saveTimer: number | null = null;
|
||||
@@ -111,10 +112,12 @@
|
||||
function strokeToPath(stroke: Stroke): Path2D {
|
||||
const outlinePoints = getStroke(stroke.points, {
|
||||
size: baseSize,
|
||||
thinning: 0.55,
|
||||
thinning: 0.5,
|
||||
smoothing: 0.5,
|
||||
streamline: 0.4,
|
||||
simulatePressure: false, // 실제 압력 사용
|
||||
// 압력이 0 으로 들어오는 케이스(빠른 펜 입력 / 일부 Safari 빌드) 방어 — 속도 기반 시뮬레이션.
|
||||
// 실제 Pencil 압력은 무시되지만 사용 일관성이 더 중요.
|
||||
simulatePressure: true,
|
||||
last: stroke !== inflight, // 진행 중 stroke 면 false → 끝점 둥글게 마감 안 함
|
||||
});
|
||||
const path = new Path2D();
|
||||
@@ -146,7 +149,7 @@
|
||||
if (!ctx) return;
|
||||
ctx.clearRect(0, 0, cssWidth, cssHeight);
|
||||
drawTraceBackground(ctx);
|
||||
ctx.fillStyle = '#111111';
|
||||
ctx.fillStyle = strokeColor;
|
||||
for (const stroke of strokes) {
|
||||
ctx.fill(strokeToPath(stroke));
|
||||
}
|
||||
@@ -293,6 +296,13 @@
|
||||
// ── 마운트 ──
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
onMount(() => {
|
||||
// --text 토큰을 실측해서 stroke 색에 반영. dark/light 모두 자동 대응.
|
||||
try {
|
||||
const txt = getComputedStyle(document.documentElement).getPropertyValue('--text').trim();
|
||||
if (txt) strokeColor = txt;
|
||||
} catch {
|
||||
// SSR / 비표준 환경 — fallback 유지
|
||||
}
|
||||
resizeCanvas();
|
||||
restoreFromLocalStorageIfNewer();
|
||||
redraw();
|
||||
|
||||
Reference in New Issue
Block a user