만성피로님의 이글루

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

그림은 보통 하얀색 도화지에 연필을 이용해서 그림을 그리게 됩니다.
이것을 자바로 만들어야 한다면 도화지와 연필을 만들어야 합니다.
## 혹시나 해서 씁니다. 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

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

감사합니다. ^^;

이번 글은 문제 풀이용 글입니다 -_-;

캔버스 예제를 만들어 했던 것 중에 좋은 예제가 있어서 캔버스 기초를 공부하는데 있어서 마지막 예제로 올릴까 합니다.

마우스로 다각형을 그리는 방법은 다음과 같습니다.
1. 캔버스 안에 마우스로 몇 회 정도 서로 다른 위치에 클릭을 합니다.
2. 그리기 버튼을 누르면 그림은 그려집니다.

힌트
1. 마우스로 클릭 할 때마다 해당 좌표를 기억해야 한다.
2. 삼각형, 사각형, 오각형...등 다각형 그리는 메소드를 활용한다.
3. 좌표를 기억할 때마다 마우스 클릭 수 또한 알 수 있도록 해야 한다.

자세한 힌트는 드래그 하시면 확인 가능합니다.
1. 백터를 이용하면 클릭한 수 만큼 백터에 저장 시키는 방법을 이용하면 다각형 그리기가 수월하다.
2. 마우스의 클릭을 이용해야 하므로 마우스 관련 리스너를 적절히 활용한다.

소스 보기(드래그 하세요 ~)
import java.awt.*;
import java.awt.event.*;
import java.util.*;

public class MouseTest extends Frame{
 
 Vector<XYpos> xy = new Vector<XYpos>();
 Canvas canvas = new Canvas();
 Button button = new Button("그리기");
 public MouseTest(){
  super("???");

  this.setSize(800,800);
  this.add(canvas,"Center");
  this.add(button,"South");
  this.setVisible(true);
  
  canvas.addMouseListener(new MouseAdapter(){
   public void mouseClicked(MouseEvent e){
    XYpos xypos = new XYpos();
    
    xypos.setX(e.getX());
    xypos.setY(e.getY());
    
    xy.add(xypos);    
   }
  });
  
  button.addActionListener(new ActionListener(){
   public void actionPerformed(ActionEvent e) {
    int x[] = new int[xy.size()];
    int y[] = new int[xy.size()];
    
    for(int i=0;i<xy.size();i++){
     XYpos xypos = xy.elementAt(i);
     x[i] = xypos.getX();
     y[i] = xypos.getY();
     System.out.println("좌표 x : "+x[i]);
     System.out.println("좌표 y : "+y[i]);
    }
    
    Graphics g = canvas.getGraphics();
    g.drawPolygon(x, y, xy.size());
    xy.clear();
   }
   
  });
  
  this.addWindowListener(new WindowAdapter(){
   public void windowClosing(WindowEvent e){
    System.exit(0);
   }
  });
 }
 
 public static void main(String[] args) {
  new MouseTest();
 }
}

class XYpos{
 private int x;
 private int y;
 
 public void setX(int x){
  this.x = x;
 }
 public int getX(){
  return this.x;
 }
 public void setY(int y){
  this.y = y;
 }
 public int getY(){
  return this.y;
 }
}