Canvas-Kit 기능 샘플

실제 UI에서 Canvas-Kit의 주요 기능을 테스트하고 확인할 수 있는 샘플 모음입니다.

🎨 Basic Rendering

안정

Viewer 패키지를 사용한 기본 캔버스 렌더링

주요 기능:

  • Scene 생성
  • Rect/Circle 렌더링
  • Canvas 기본 기능
샘플 확인하기 →

✨ Konva Designer

안정

Konva.js 기반 완전한 편집 환경 (Rectangle Selection 포함)

주요 기능:

  • 드래그 & 드롭
  • Rectangle Selection
  • Transformer 핸들
  • 멀티 선택
샘플 확인하기 →

🛠️ Advanced Designer

신규

선택, 그리기, 텍스트 편집이 통합된 고급 디자이너

주요 기능:

  • 통합 툴바
  • 다중 도구 지원
  • 실시간 미리보기
  • 키보드 단축키
샘플 확인하기 →

🎯 Hit Test

안정

마우스 클릭으로 객체 선택 테스트 (Core 패키지)

주요 기능:

  • 좌표 기반 객체 찾기
  • 다중 객체 겹침 처리
  • 실시간 히트 테스트
샘플 확인하기 →

🖱️ Selection System

안정

객체 선택 및 바운딩 박스 시각화

주요 기능:

  • 시각적 선택 피드백
  • 바운딩 박스 렌더링
  • 선택 상태 관리
샘플 확인하기 →

✏️ Free Drawing

신규

자유 그리기 및 브러시 도구 (Konva 스타일)

주요 기능:

  • 펜/브러시 모드
  • 색상 & 두께 조절
  • 스무스 곡선
  • 지우개 도구
샘플 확인하기 →

📝 Editable Text

신규

편집 가능한 텍스트 및 스타일링 (Konva 스타일)

주요 기능:

  • 더블클릭 편집
  • 실시간 스타일링
  • 폰트 & 색상 변경
  • 크기 조정
샘플 확인하기 →

🎬 Animation

신규

requestAnimationFrame을 활용한 다양한 애니메이션 효과

주요 기능:

  • 바운싱 볼
  • 이동 애니메이션
  • 크기 변화
  • 색상 변화
샘플 확인하기 →

🏢 Interactive Map

신규

인터랙티브 빌딩 맵 및 공간 관리 (Konva 스타일)

주요 기능:

  • 룸 선택
  • 점유 상태 관리
  • 범례 시스템
  • 통계 대시보드
샘플 확인하기 →

↶ Undo/Redo

안정

Command Pattern을 활용한 실행 취소/다시 실행

주요 기능:

  • Command Pattern
  • 히스토리 관리
  • 키보드 단축키
  • 상태 복원
샘플 확인하기 →

📋 Copy/Paste

안정

클립보드 시스템 및 복사/붙여넣기/복제

주요 기능:

  • 클립보드 관리
  • 복사/잘라내기/붙여넣기
  • 복제 기능
  • 키보드 단축키
샘플 확인하기 →

💥 Collision Detection

예정

객체 간 충돌 감지 및 물리 시뮬레이션 (개발 예정)

주요 기능:

  • AABB 충돌 감지
  • 원형 충돌 감지
  • 물리 반응
  • 탄성 충돌

🛠️ 개발 진행 상황

각 샘플은 Canvas-Kit의 실제 기능 개발과 연동되어 있습니다. 새로운 기능이 구현되면 해당 샘플이 즉시 업데이트됩니다.

구현 완료
신규 기능
개발 예정

🎨 Konva.js 영감 샘플들

Konva.js의 데모에서 영감을 받아 Canvas-Kit에 구현한 새로운 기능들입니다:

✏️ Free Drawing

Konva의 Free Drawing 데모를 참고한 자유 그리기 기능

📝 Editable Text

편집 가능한 텍스트와 실시간 스타일링 기능

🛠️ Advanced Designer

모든 기능이 통합된 올인원 디자인 툴

🎬 Animation

다양한 애니메이션 기법들을 Canvas2D로 구현

🏢 Interactive Map

Building Map 데모에서 영감을 받은 인터랙티브 맵