만성피로님의 이글루

이번 글에서는 화이트보드를 만들어 보도록 하겠습니다.

그림은 보통 하얀색 도화지에 연필을 이용해서 그림을 그리게 됩니다.
이것을 자바로 만들어야 한다면 도화지와 연필을 만들어야 합니다.
## 혹시나 해서 씁니다. Canvas를 떠올리지 않는 편이 좋습니다. 혼란에 빠지지 마시길 ㅎㅎㅎ...

도화지는 화이트보드 클래스가 될 것이고, 연필은 펜 클래스가 될 것입니다.
설계한 방식에 따라 다르지만 여기서 펜 클래스는 펜의 객체 자체가 그림을 그리는 것은 아닙니다.
펜 클래스는 현재 그릴 그림이 사각형인지, 삼각형인지를 설정하게 되는 클래스 입니다.

잠깐 다른 것을 예로 들자면..
학생 정보를 담고 있는 Student 라는 클래스가 존재합니다. 이 안에는 각 학생에 대한 정보를 담을 수 있는
이름, 학번, 성적 필드가 존재하겠지요. 이와 마찬가지 입니다. 펜은 사각형 펜, 삼각형 펜 등이 될 수 있는 것 입니다.

가장 대표적인 클래스 두개를 이야기 했으니 만들어야 할 화이트보드의 인터페이스를 보도록 합시다.
위에 그림을 보면 좌측에는 8개의 버튼이 존재하고 가운데는 도화지에 해당하는 공란이 있습니다.

좀더 자세하게 설명을 하면
좌측에 버튼들은 하나의 패널 안에 GridLayout를 이용해서 배치 한 뒤 메인프레임에 적용 된 것이고,
가운데 공란은 보기에는 공란이지만 프레임에 Canvas를 적용한 것 입니다.

그럼 본격적으로 요구조건을 나열하겠습니다.

1차 요구조건
Pen 클래스
- 펜의 타입을 설정하는 int type를 맴버변수로 갖고 있다.
- 펜을 설정하는 setType, 설정을 리턴하는 getType 변수를 갖고 있다.

MyWhiteBoard 클래스
- 프레임을 상속한다.
- Pen 클래스의 객체를 맴버변수로 갖고 있다.
- MenuPanel 클래스의 객체를 맴버변수로 갖고 있다.
- MyCanvas 클래스의 객체를 맴버변수로 갖고 있다.
- 프레임 크기는 가로, 세로 500 전후 또는 임의로 설정한다.
- 실행 시 프레임은 윈도우 화면 정 중앙에 출력된다.
- 좌측에는 MenuPanel 클래스의 객체가 배치돼야 한다.
- 가운데는 MyCanvas 클래스의 객체가 배치돼야 한다.
- 프로그램 종료 이벤트를 적용한다.

--- 아래의 클래스들은 내부 클래스로 구현 한다.--------------
MenuPanel 클래스
- Panel 클래스를 상속한다.
- GridLayout를 이용해서 버튼을 배치한다.

MyCanvas 클래스
- Canvas 클래스를 상속한다.
- 마우스에 좌표를 기억할 xp, yp, xr, yr 맴버변수를 갖고 있다.
- 마우스가 눌러질 될 때와 떼어질 때 좌표를 기억하도록 하는 이벤트를 만든다.
- MouseListenet 인터페이스 또는 MouseAdapter 클래스를 이용하여 마우스 이벤트를 구현한다.
## 이벤트가 캔버스에 직접 그림을 그리는것은 아니다. 이벤트는 좌표를 기억하는 용도로 구현한다.

MenuListener 클래스
- ActionListener 인터페이스를 구현한다.
---------------------------------------------------------


2차 요구 조건
MenuPanel 클래스
- 각 버튼에 MenuListener 클래스를 이용하여 이벤트를 적용시킨다.

MenuListener 클래스
- 모두지우기는 MyWhiteBoard 클래스의 MyCanvas객체를 이용해서 clearRect() 메소드를 이용해서 지운다.
- 눌러진 버튼에 따라 MyWhiteBoard 클래스의 Pen객체에 type를 설정한다.
# type는 0 부터 사각형이고 6은 지우기이다. 그러나 임의의 방식을 이용해도 상관 없다.
# clearRect() 메소드를 이용해서 전체지우기를 할 때는 클릭 했을 때 바로지워진다.

MyCanvas 클래스
- 마우스가 떼질 때 발생하는 이벤트 메소드에서 draw() 메소드를 호출한다.
- draw() 메소드는 MyWhiteBoard의 MyCanvas객체를 이용해 그림을 그리는 역할을 한다.

3차 요구 조건
- 위에 조건을 종합해 보면 그림을 그리는 방식은 그래그를 하는 방식으로 그림을 그린다. 그런데 여기서 발생할 수 있는 문제가 한가지 존재 한다. 마우스 드래그 방향이 좌측 상단에서 우측 하단으로(↘) 그려 질 때는 전혀 문제가 없다. 그러나 다음의 방향으로 드래그를 할 경우에는 문제가 발생한다. 다음의 요구사항을 처리해라.
    1. 좌측 하단에서 우측 상단으로 드래그 해서 그린다.(↗)
    2. 우측 하단에서 좌측 상단으로 드래그 해서 그린다.(↖)
    3. 우측 상단에서 좌측 하단으로 드래그 해서 그린다.(↙)

- 부채꼴의 경우 그려지는 부채꼴의 각도는 임의로 한다. 다음에 그림 처럼 그려지도록 한다.이 정도의 요구조건이면 완성 할 수 있을 듯 합니다. 해보시고 궁금한 점이나 부족한 부분이 있으면 댓글을 달아주시기 바랍니다.

그리고 완성 된 파일을 공개해 두겠습니다.
MyWhiteBoard.java

다 완성 했다면 본인의 실력을 한층 올릴 수 있도록 추가 기능을 넣어 보는 것도 좋은 공부입니다.

감사합니다. ^^;