안드로이드에서 2D 그래픽을 표현하기 위한 예제들

안드로이드에서 2D 그래픽을 표현하기 위한 예제들

 

개발환경 : JDK 1.5, eclipse-galileo, Android GoogleAPI 2.1, window XP

 

예제는 아드로이드 SDK 에서 제공하는 그래픽적인 요소를 어떻게 사용할지에 대한

간단한 예제이다. 그래픽 API 를 정확하게 이해할려면 간단한 예제라도 구현해보아야한다.

화면상에 어떻게 표현되는지를 보아야 무엇이 문제인지 파악할수 있기 때문이다.

예제에 쓰인 클래스는 View 를 상속받아 만들었으며 View.onDraw() 함수를 오버로딩해서

화면에 각종 기능들을 구현해 넣었다.

 

onDraw 의 파라미터로 넘어온 Canvas 객체는 그림판이다. 이 위에 모든 그래픽 작업을

하면된다. 그래픽 작업을 할수 있도록 수많은 함수들을 지원하고 있다.

(1) 캔버스 배경화면 색깔 넣기

 

예제를 하나하나 뜯어 보도록 하자. 첫번째는 캔버스 화면에 배경화면을 원하는 색깔로

채우는 것이다. 예제는 하얀색으로 채워넣었다. 그외에 지원하는 색깔변수는 다음과 같다.

BLACK, BLUE, CYAN, DKGRAY, GRAY, GREEN, LTGRAY, MAGENTA, RED, TRANSPARENT 

WHITE, YELLOW

 

색깔변수를 넣어 표현하는 방식외에 16진수로도 표현이 가능하다.

paint.setColor(0xFFFF0000);

Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);

// 화면 캔버스를 하얀색으로 표현한다.
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);

 

(2) 원 그리기

 

다음은 원을 그리는 예제이다. 두가지 원을 구현했는데 차이가 있다. 하나는 anti-alias 를

적용한 것이고 다른하나는 그렇지 않다. anti-alias 는 표면처리를 부드럽게 하는 기술이다.

Paint 클래스에 setAntiAlias 함수가 그 역할을 하게 되는데 파라미터로 true 를 넘기게 되면

적용이 되어서 곡선이 부드럽게 처리 된다.

// 푸른색으로 원을 그린다. 
paint.setColor(Color.BLUE);
canvas.drawCircle(40, 40, 30, paint);

// antialiasing 옵션을 true 주고 원을 그린다.
paint.setAntiAlias(true);
paint.setColor(Color.BLUE);
canvas.drawCircle(110, 40, 30, paint);

 

(3) 텍스트 표현

 

글자표현하는 예제이다. 두가지중 하나는 anti-alias 를 적용하지 않고 글자 라인을

채우지 않았다. 두번째 예제는 Paint.Style.FILL 를 사용해 글자라인의 내부를 채워넣었다.

paint.setAntiAlias(false);
paint.setColor(Color.RED);

// draw some text using STROKE style
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(1);
paint.setColor(Color.MAGENTA);
paint.setTextSize(30);
canvas.drawText("Style.STROKE", 75, 110, paint);

// draw some text using FILL style
paint.setStyle(Paint.Style.FILL);
//turn antialiasing on
paint.setAntiAlias(true);
paint.setTextSize(30);
canvas.drawText("Style.FILL", 75, 150, paint);

 

(4) 글자회전과 위치 포인트를 초기화 한다. 그리고 글자를 외부 라인으로 감싸기

 

아래 예제에서 주의해서 봐야될 부분은 Paint 클래스의 getTextBounds 를 사용해

글자의 외부크기를 Rect 클래스에 담아 알아오고 글자 외부를 선으로 감싸게 한다.

// 글자의 외부를 싸고 있는 사각크기를 알아온다.

paint.getTextBounds(strState, 0, strState.length(), rect);

 

그리고 Canvas 의 translate 함수로 입력한 값으로 초기화 해준다. 파라미터로

입력한 x, y 값의 위치를 시작점 0, 0 으로 셋팅해준다. 그러니까 drawText 에 파라미터로

넘어가는 위치값의 0, 0 이 실제로는 x, y 값이 되는것이다.

 

두번째 예제는 Canvas 의 rotate 를 사용해 글자를 회전한다. 함수의 첫번째 파라미터는

360 에서 몇도를 돌릴지에 대한 값이다. - 마이너스 값이면 시계반대 반향이 된다.

두, 세번째 파라미터는 글자 회전의 중심축 위치값이 된다. 그 위치값을 중심으로 해서

글자를 회전하는 것이다. 회전 적용을 취소할려면 Canvas 의 restore() 를 사용하면 된다.

x = 75;
y = 220;
paint.setColor(Color.GRAY);
paint.setTextSize(25);
			
/** 글자외부를 싸고 위치값을 재조정한다. */
String strState = "!Rotated";
Rect rect = new Rect();
// 글자의 외부를 싸고 있는 사각크기를 알아온다.
paint.getTextBounds(strState, 0, strState.length(), rect);
canvas.translate(x, y);
paint.setStyle(Paint.Style.FILL);
// draw unrotated text
canvas.drawText(strState, 0, 0, paint);

/** 위치값을 원래대로 돌리고  글자를 회전한다. */ 
String strRotated = "Rotated!";
paint.setStyle(Paint.Style.STROKE);
canvas.drawRect(rect, paint);
// 위치값을 원래대로 돌린다.
canvas.translate(-x, -y);
canvas.rotate(-45, x + rect.exactCenterX(),
                 y + rect.exactCenterY());
// draw the rotated text
paint.setStyle(Paint.Style.FILL);
canvas.drawText(strRotated, x, y, paint);

canvas.restore();

 

(5) 라인그리기와 파선으로 표현하기

 

라인을 그리는 함수는 Canvas 의 drawLine 이다. 여기에 여러가지 효과를 줄수있는데

아래 예제는 파선효과를 주었다. 파선효과를 위한 클래스는 DashPathEffect 이다.

DashPathEffect 객체를 생성해 Paint 의 setPathEffect 인자값으로 넘기면 된다.

DashPathEffect 인자중에 첫번째 들어가는 float 배열은 파선의 크기를 정하는 값인데

첫번째는 파선의 길이값이며 두번째는 파선사이의 간격값이다.

// draw a thick dashed line
DashPathEffect dashPath =
         new DashPathEffect(new float[]{20,3}, 1);
paint.setPathEffect(dashPath);
paint.setStrokeWidth(8);
canvas.drawLine(0, 350 , 320, 350, paint);

전체 소스는 다음과 같다

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
 
public class Graphic2D extends Activity {
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(new ShowView(this));
    }
 
    class ShowView extends View {
    	public ShowView(Context context){
		super(context);
	}
	@Override protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		int x = 0;
		int y = 0;
		Paint paint = new Paint();
		paint.setStyle(Paint.Style.FILL);
		// 화면 캔버스를 하얀색으로 표현한다.
		paint.setColor(Color.WHITE);
		canvas.drawPaint(paint);

		// 푸른색으로 원을 그린다. 
		paint.setColor(Color.BLUE);
		canvas.drawCircle(40, 40, 30, paint);

		// antialiasing 옵션을 true 주고 원을 그린다.
		paint.setAntiAlias(true);
		paint.setColor(Color.BLUE);
		canvas.drawCircle(110, 40, 30, paint);

		paint.setAntiAlias(false);
		paint.setColor(Color.RED);

			
		// draw some text using STROKE style
		paint.setStyle(Paint.Style.STROKE);
		paint.setStrokeWidth(1);
		paint.setColor(Color.MAGENTA);
		paint.setTextSize(30);
		canvas.drawText("Style.STROKE", 75, 110, paint);

		// draw some text using FILL style
		paint.setStyle(Paint.Style.FILL);
		//turn antialiasing on
		paint.setAntiAlias(true);
		paint.setTextSize(30);
		canvas.drawText("Style.FILL", 75, 150, paint);

			
		x = 75;
		y = 220;
		paint.setColor(Color.GRAY);
		paint.setTextSize(25);
		
		/** 글자외부를 싸고 위치값을 재조정한다. */
		String strState = "!Rotated";
		Rect rect = new Rect();
		// 글자의 외부를 싸고 있는 사각크기를 알아온다.
		paint.getTextBounds(strState, 0, strState.length(), rect);
		canvas.translate(x, y);
		paint.setStyle(Paint.Style.FILL);
		// draw unrotated text
		canvas.drawText(strState, 0, 0, paint);
		
		/** 위치값을 원래대로 돌리고  글자를 회전한다. */ 
		String strRotated = "Rotated!";
		paint.setStyle(Paint.Style.STROKE);
		canvas.drawRect(rect, paint);
		// 위치값을 원래대로 돌린다.
		canvas.translate(-x, -y);
		canvas.rotate(-45, x + rect.exactCenterX(),
                                        y + rect.exactCenterY());
		// draw the rotated text
		paint.setStyle(Paint.Style.FILL);
		canvas.drawText(strRotated, x, y, paint);

		//undo the rotate
		canvas.restore();
		canvas.drawText("After canvas.restore()", 50, 300, paint);
		// draw a thick dashed line
		DashPathEffect dashPath =
                            new DashPathEffect(new float[]{20,3}, 1);
		paint.setPathEffect(dashPath);
		paint.setStrokeWidth(8);
		canvas.drawLine(0, 350 , 320, 350, paint);

	}
    }
}