[Android, Canvas, Paint] 안드로이드 캔버스 기본 예제

안녕하세요. 블랙진입니다.

이번시간에는 캔버스의 기본 사용법에 대해 알아보겠습니다. 

1. Canvas = 도화지

캔버스는 일종의 도화지라고 생각하시면 됩니다. 도화지에 사용되는 종이의 재료는 나무이죠. 캔버스에서 사용하는 종이의 재료가 바로 비트맵입니다. 아래는 구글문서에 있는 캔버스의 생성자입니다. 

구글 문서 Canvas

보시는 바와 같이 캔버스를 생성하는데 그 안에 종이역활을 할 재료인 비트맵을 넣어주어야 합니다. 그럼 이를 코드로 표현해 볼까요?

Bitmap bitmap = Bitmap.createBitmap(800,800, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.WHITE);

가로 800, 세로 800 인 ARGB_8888 형식(이는 종이의 재질 이라고 생각하시면 됩니다.)인 비트맵을 생성했습니다. 이를 ImageView에 설정해보겠습니다.

imageView.setImageBitmap(bitmap);

현재 레이아웃의 배경은 "#c5d1c5" 입니다. 하얀 캔버스를 잘 보이게 하기 위해 배경색을 임의 지정했습니다. 보시는 바와 같이 가로 800 세로 800 인 하얀색 종이가 준비되었습니다. 이제 이 종이 위에 그림을 그려 보겠습니다.

2. Paint = 크레파스

도화지에 그림을 그리기 위해서는 크레파스가 필요하겠죠? 그래서 크레파스를 준비해 봤습니다.

Paint paint = new Paint();

네? 이게 끝이라고요? 이게 전부입니다. 이렇게 도화지와 크레파스를 준비하시면 됩니다.

3. 점, 네모, 원 그려보기

컴퓨터 에서 뭔가를 도화지에 그리기 위해서는 좌표를 알아야 합니다. 위 예제에서 사용한 도화지의 좌표를 알아 보겠습니다.

안드로이드 폰에서는 왼쪽 상단이 좌표의 기준입니다. 오른쪽으로 이동하면 X 좌표가 플러스 되고 아래쪽으로 움직이면 Y 좌표가 플러스 됩니다. 위 도하지는 가로와 세로 크기가 800 이니깐 (0,0) ~ (800,800) 좌표를 가지게 됩니다. 

1) 점 그리기

// 크레파스의 색 정하기
paint.setColor(Color.RED);

// 크레파스의 굵기 정하기
paint.setStrokeWidth(30f);

// 도화지에 좌표로 표시하기
canvas.drawPoint(360, 640, paint);

빨간색의 30f 굵기를 가지는 점을 (360, 640) 좌표에 찍어보았습니다. 위 예제를 통해 좌표에 대한 감각이 좀 잡히셨나요? 좌표값을 바꿔가면서 좌표에 대한 감각을 익히시면 좋을 것 같습니다.

2) 네모 그리기

네모를 그리기 위해서는 좌표 인자가 2개 더 필요합니다.

// 크레파스의 색 정하기
paint.setColor(Color.RED);

// 도화지에 좌표로 표시하기
canvas.drawRect(160, 140, 360, 640, paint);

drawRect 함수를 사용하는데 인자가 좀 많지요? 하지만 그림으로 보면 전혀 어렵지 않습니다.

각 꼭지점의 좌표를 drawRect 함수와 같이 확인해보세요. 여기서부터는 잘 관찰해야합니다. drawRect 함수의 첫번째, 두번째 인자 (160,140)은 왼쪽 상단의 좌표 입니다. 세번째, 네번째 인자(360,640)은 오른쪽 하단의 좌표로 보시면 이해하기 쉬우실 겁니다.

2-1) RectF 함수

drawRect 에서 좌표를 canvas.drawRect(160, 140, 360, 640, paint) 으로 첫 번째 ~ 네 번째 인자값을 사용해 표시했습니다. 하지만 실무에서는 좌표를 나타내는 함수인 RectF 로 많이 사용합니다. 아래는 위 네모그리기와 완전히 동일한 코드입니다.

// 크레파스의 색 정하기
paint.setColor(Color.RED);

// 도화지에 좌표로 표시하기
RectF rect = new RectF();
rect.set(160, 140, 360, 640);

canvas.drawRect(rect, paint);

3) 원 그리기

좌표에 대한 감각이 어느정도 잡히셨나요? 이번에는 원을 그려보겠습니다. 좌표는 위와 동일하게 하여 그려보겠습니다. 어떤 모양이 나올까요?

// 크레파스의 색 정하기
paint.setColor(Color.RED);

// 도화지에 좌표로 표시하기
RectF rect = new RectF();
rect.set(160, 140, 360, 640);

// 원 그리기
canvas.drawArc(rect, 0, 360, true, paint);

일단 그림을 먼저 보여드리겠습니다. 직사각형의 좌표를 그대로 사용했기 때문에 타원 모양의 원이 형성되었습니다

이를 원으로 보이게 하기 위해서는 가로와 세로의 크기가 같게 좌표를 찍으면 되겠죠? 왼쪽 상단 (160, 140) 을 중심으로 가로 세로의 크기가 200인 원을 그리기 위해 오른쪽 하단 좌표는 (360, 340) 으로 해보겠습니다.

// 크레파스의 색 정하기
paint.setColor(Color.RED);

// 도화지에 좌표로 표시하기
RectF rect = new RectF();
rect.set(160, 140, 360, 340);

// 원 그리기
canvas.drawArc(rect, 0, 360, true, paint);

아름다운 원이 완성되었습니다. 

이번에는 위에서 사용한 drawArc 함수에 대해 좀더 설명해 보겠습니다. 원은 오른쪽 중간을 0으로해서 시계방향으로 회전하여 그립니다.

위와 같은 모습의 좌표라고 보시면 됩니다. drawArc 함수의 두번째와 세번째 인자를 유심히 보겠습니다. 두번째 인자는 원을 돌릴 기준점입니다. 현재 값은 0 이기 때문에 위 그림에서 0 좌표를 기준으로 그립니다. 두번째 인자는 몇도를 시계방향으로 돌릴지 정하는 값입니다. 360의 값을 가지기 때문에 0을 기준으로 시계방향으로 360도 돌리니 위와 같은 원이 만들어 진 것입니다.

몇가지 다른 예를 보여드리겠습니다.

// 원 그리기
canvas.drawArc(rect, 0, 90, true, paint);

원의 좌표 0을 기준으로 시계방향으로 90도 돌리니 위와같이 1/4 모양의 부채꼴이 만들어 졌습니다. 이번에는 기준점을 달리해서 그려보겠습니다.

// 원 그리기
canvas.drawArc(rect, 90, 270, true, paint);

원의 좌표 90을 기준으로 270도 돌린 모습니다. 인자값을 변형해 보며 감을 익혀보세요!

그리고 네번째 인자가 true 로 설정되어 있는데 이 값을 false 로 만들면 아래와 같은 그림이 그려집니다.

// 원 그리기
canvas.drawArc(rect, 90, 270, false, paint);

위 예제로는 잘 이해가 않가실겁니다. 첫번째 원 예제로 보여준 값과 비교해 보겠습니다.

// 원 그리기
canvas.drawArc(rect, 0, 90, false, paint);

네번째 인자만 true 에서 false 로 바꿔준 결과입니다. 네번째 인자는 useCenter로 설명은 아래와 같이 되어있습니다.

제가 이해하기에는 원을 그릴 때 가운데 부분을 어떤식으로 포함시킬지에 대한 값인것 같습니다. 정확한 설명은 어렵고 그림으로 이해하시면 좋을 것 같습니다.

4. 그외 다양한 기능들

캔버스에서 점, 네모, 원에 대한 예제만 이번시간에 다뤘습니다. 이 외에도 선을 자유자제로 그릴 수도 있고 비트맵도 사용하여 그릴 수도 있습니다. 이러한 기능들은 문서를 보고 직접 따라해 보시기 바랍니다.

이번 포스터를 통해 캔버스에 좀더 친숙해 지셨으면 좋겠습니다. 개인적으로 실무에서는 비트맵을 수정하는데 캔버스를 많이 사용했습니다. 다음에는 비트맵을 다루는 법에 대해 포스팅을 해보겠습니다.