2-Layer Canvas 차트 엔진
실시간 데이터와 사용자의 포인터가 서로 다른 속도로 변한다는 점에 맞춰, 차트와 크로스헤어의 그리기 작업을 분리했습니다.
포인터 이동만으로 전체 차트를 다시 그려야 할까
캔들·거래량·분석선은 데이터나 표시 범위가 바뀔 때 갱신되지만, 크로스헤어는 포인터를 움직일 때마다 바뀝니다. 이 작업을 같은 Canvas에 묶으면 가격을 확인하는 작은 움직임에도 차트 전체를 다시 그리게 됩니다. 변경 원인에 따라 두 레이어를 독립적으로 갱신하도록 구성했습니다.
같은 좌표 위에, 다른 갱신 주기를 가진 두 레이어
Overlay Canvas · 포인터 레이어
크로스헤어와 포인터에 따라 바뀌는 일시적 표시를 그립니다.
갱신 조건 포인터 이동 · 차트 좌표 변경
Base Canvas · 차트 레이어
캔들·거래량·축·분석선과 AI 분석 표시를 그립니다.
갱신 조건 데이터 · 확대/이동 · 크기 · 분석 표시 변경
Base에서 만든 차트 좌표를 Overlay도 공유합니다. 렌더링 작업은 나누되, 포인터가 가리키는 시점과 가격은 같은 좌표 기준으로 맞췄습니다.
연속된 입력을 한 프레임의 갱신으로 묶기
포인터 이동 → Overlay 갱신
최신 포인터 좌표를 보관한 뒤 Overlay의 그리기 작업을 예약합니다. 프레임이 이미 예약돼 있으면 추가 예약 없이 좌표만 갱신합니다.
데이터·범위 변경 → Base 갱신
실시간 데이터가 바뀌거나 차트를 이동·확대하면 Base를 다시 그립니다. 새 좌표를 만든 다음 Overlay도 갱신해 두 레이어의 위치를 맞춥니다.
- 입력 수신최신 좌표와 차트 상태 보관
- 프레임 예약중복 예약은 추가하지 않음
- 해당 레이어 갱신requestAnimationFrame
포인터 확인과 차트 데이터 갱신의 책임 분리
| 입력 | 갱신 범위 |
|---|---|
| 크로스헤어만 이동 | Overlay Canvas |
| 실시간 데이터·분석 표시 변경 | Base Canvas → Overlay Canvas |
| 차트 이동·확대·크기 변경 | 좌표 재계산 → 두 레이어 갱신 |
포인터만 움직일 때는 차트 데이터를 다시 그리지 않도록 해, 사용자가 가격과 시점을 확인하는 과정의 불필요한 렌더링을 줄였습니다.