Drawing Module Test

그리기 모듈 테스트 페이지

이 페이지는 독립적인 그리기 모듈(DrawingModule)의 기능을 테스트하기 위한 페이지입니다.

아래 버튼들을 클릭하여 다양한 설정으로 그리기 모듈을 실행해보세요.

테스트 버튼
주요 기능
  • 점연결(Polyline), 직선(Line), 자유선(Free) 그리기 모드
  • 직각 모드 지원 (수평/수직선 자동 정렬)
  • 색상 선택 및 선 굵기 조절
  • 지우개 기능 (크기 조절 가능)
  • 텍스트 추가 기능
  • 실행취소(Undo) 기능
  • 초기화 기능
  • 이미지 저장 및 다운로드
  • 터치 디바이스 지원 (모바일/태블릿)
  • 반응형 디자인
사용 예제 코드
// 기본 사용법
const drawer = new DrawingModule({
    container: 'body',
    onSave: (data) => {
        console.log('저장된 이미지:', data.imageData);
        console.log('저장 시간:', data.timestamp);
    }
});
drawer.show();

// 고급 설정
const advancedDrawer = new DrawingModule({
    container: '#myContainer',
    width: 1000,
    height: 700,
    canvasWidth: 640,
    canvasHeight: 480,
    title: '나의 그리기 도구',
    initialImage: 'path/to/image.png',
    onSave: (data) => {
        // 서버로 이미지 전송
        sendToServer(data.imageData);
    },
    onCancel: () => {
        console.log('그리기 취소됨');
    }
});

결과 표시 영역

그리기를 완료하면 여기에 결과가 표시됩니다.