그림판 - Step1

이 자료들은 팁스소프트에서 제공하는 [ 알짜배기 ] 프로그램을 이용하면 더 편리하게 볼수 있습니다.

* 알짜배기 프로그램 받기 - http://www.tipssoft.com/bulletin/tb.php/QnA/8406

* 관리자의 Tipssoft 이야기를 들어보세요 ( 트위터 ID : tipssoft )

* 안드로이드 강좌 목록 - http://www.tipssoft.com/bulletin/tb.php/old_bbs/501

* 이 예제는 안드로이드 팜으로 만들어졌습니다.

( AndroidFarm - http://www.tipssoft.com/bulletin/tb.php/update/1388 )

이 예제는 안드로이드용 기기에서 간단하게 낙서나 그림을 그릴 수 있는 그림판입니다. 이 예제에서는

가상의 비트맵을 생성하여 해당 비트맵에 그림을 그리고 onDraw 에서 비트맵을 뷰에 그리도록 구성

하였습니다.

색상을 선택하는 Color Picker 는 아래에 링크된 자료를 참고하였습니다.

Color Picker 만들기 - http://www.tipssoft.com/bulletin/tb.php/update/1432

터치 이벤트를 사용하는 방법이나 액티비티를 전환하는 것에 대해 잘 모르시다면 아래의 강좌를 본 후

예제를 보시는 것이 좋습니다.

TouchEvent Handler 처리하기 - http://www.tipssoft.com/bulletin/tb.php/FAQ/973
액티비티 전환하기 - http://www.tipssoft.com/bulletin/tb.php/FAQ/945

1. 실행 화면

하단에 있는 회색톤의 버튼 네개는 그리는 도형의 종류를 선택할 때 사용하고, 노란색 버튼은 색상을

선택할 때 사용합니다. 색상 버튼에는 현재 선택된 색상이 배경색으로 출력되며 현재 그리는 도형의

타입이 문자로 출력됩니다. 아래의 그림같은 경우에는 노란색으로 선을 그리도록 설정된 것입니다.

2. 주요 소스 코드

// 뷰의 크기가 변경되면 호출되는 메소드
protected void onSizeChanged (int w, int h, int oldw, int oldh)
{
if(w != oldw) {
// 뷰 크기와 동일한 크기의 32bit pixel 값을 가지는 비트맵을 만든다.
m_bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
// 캔버스를 생성한다.
m_canvas = new Canvas(m_bitmap);
m_canvas.drawColor(Color.WHITE);

// 뷰를 갱신한다.
invalidate();
}
}

protected void onDraw(Canvas canvas)
{
// 메모리 비트맵에 그린 이미지를 뷰에 그린다.
canvas.drawBitmap(m_bitmap, 0, 0, null);

// 그림을 그리고 있는 중인 경우
if(m_is_drawing_flag == 1) {

if(m_draw_mode == 1) { // 선 그리기
// 뷰에 선을 그린다.
canvas.drawLine(m_old_x, m_old_y, m_new_x, m_new_y, m_paint);

} else if(m_draw_mode == 2) { // 사각형 그리기
// 뷰에 사각형을 그린다.
canvas.drawRect(m_old_x, m_old_y, m_new_x, m_new_y, m_paint);

} else if(m_draw_mode == 3) { // 원 그리기
// RectF 객체에 좌표를 구성한다.
m_rect.left = m_old_x;
m_rect.top = m_old_y;
m_rect.right = m_new_x;
m_rect.bottom = m_new_y;

// 원을 그린다.
canvas.drawOval(m_rect, m_paint);
}
}
}

public boolean onTouchEvent(MotionEvent event)
{
// 터치한 좌표값을 얻는다.
float x = event.getX();
float y = event.getY();

switch(event.getAction()) {
// 화면을 손가락으로 터치한 경우
case MotionEvent.ACTION_DOWN:
// Pen 으로 그리기를 하고 있었던 경우
if(m_draw_mode == 0) {
// Path 객체를 초기화하고 시작 위치를 잡는다.
m_path.reset();
m_path.moveTo(x, y);

// 메모리 캔버스에 Path 를 그린다.
m_canvas.drawPath(m_path, m_paint);
} else if(m_draw_mode == 1 || m_draw_mode == 2 || m_draw_mode == 3) {
// 현재 좌표값을 저장한다.
m_new_x = x;
m_new_y = y;
}
// 터치를 시작한 시점의 좌표값을 저장한다.
m_old_x = x;
m_old_y = y;

invalidate();

// 그리기 작업중임을 표시한다.
m_is_drawing_flag = 1;
return true;
case MotionEvent.ACTION_MOVE:
// Pen 으로 그리기를 하고 있었던 경우
if(m_draw_mode == 0) {
// 곡선형으로 선을 이어나가며 Path 를 구성한다.
m_path.quadTo(m_old_x, m_old_y, x, y);
// 메모리 캔버스에 Path 를 그린다.
m_canvas.drawPath(m_path, m_paint);

// 현재 좌표값을 기억한다.
m_old_x = x;
m_old_y = y;
} else if(m_draw_mode == 1 || m_draw_mode == 2 || m_draw_mode == 3) {
// 선, 사각형, 원을 그리는 경우 터치가 종료되는 시점에
// 메모리 캔버스에 그려져야하므로 현재 좌표만 기억하여
// 뷰에 직접 그리도록한다.
m_new_x = x;
m_new_y = y;
}
invalidate();
return true;
case MotionEvent.ACTION_UP:
// Pen 으로 그리기를 하고 있었던 경우
if(m_draw_mode == 0) {
// 곡선형으로 선을 이어서 Path 를 구성한다.
m_path.quadTo(m_old_x, m_old_y, x, y);
// 메모리 캔버스에 Path 를 그린다.
m_canvas.drawPath(m_path, m_paint);

} else if(m_draw_mode == 1) { // 선
// 메모리 캔버스에 선을 그린다.
m_canvas.drawLine(m_old_x, m_old_y, x, y, m_paint);

} else if(m_draw_mode == 2) { // 사각형
// 메모리 캔버스에 사각형을 그린다.
m_canvas.drawRect(m_old_x, m_old_y, x, y, m_paint);

} else if(m_draw_mode == 3) { // 원
// RectF 객체를 구성한다.
m_rect.left = m_old_x;
m_rect.top = m_old_y;
m_rect.right = x;
m_rect.bottom = y;

// 메모리 캔버스에 원을 그린다.
m_canvas.drawOval(m_rect, m_paint);
}
invalidate();

// 그리기 작업이 끝났음을 표시한다.
m_is_drawing_flag = 0;
return true;
}
return false;
}

// 색상을 설정한다.
public void setColor(int parm_color)
{
m_paint.setColor(parm_color);
}

// 그리기 모드를 설정한다.
public void setDrawMode(int parm_mode)
{
m_draw_mode = parm_mode;
}