[Android] Graphic 2: Graphics Examples

직전 포스팅에서는 원을 하나 구성하여 클릭 이벤트를 구성했다면, 이번 포스팅에서는 좀 더 다양한 모양의 도형들을 그려보고 이를 위해 사용하는 메서드와 도형 효과를 주기 위해 사용하는 다양한 메서드들을 정리 해보려고 한다.

 

우선, 그래픽을 그릴 때 필요한 주요 클래스는 다음과 같다.

 

클래스	설명
Canvas	뷰의 표면에 직접 그릴 수 있도록 만들어 주는 객체로 그래픽 그리기를 위한 메서드가 정의되어 있다.
Paint	그래픽 그리기를 위해 필요한 색상 등의 속성을 담고 있다.
Bitmap	픽셀로 구성된 이미지로 메모리에 그래픽을 그리는 데 사용한다.
Drawable	사각형, 이미지 등의 그래픽 요소가 객체로 정의되어 있다.

---

다음 예제는 사각형이나 원을 그리고 해당 Paint 객체에 스타일을 설정하는 예제이다. 

 

◎CustomView

package com.example.samplegraphic.custom;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
import androidx.annotation.Nullable;

public class CustomView extends View {

    // 그래픽을 그리기 위한 속성을 담고 있음
    private Paint paint;

    public CustomView(Context context) {
        super(context);
        init(context);
    }

    public CustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        paint = new Paint();
    }

    @Override
    // View 가 화면에 그려질 때 호출되는 콜백
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setStyle(Paint.Style.FILL); // 첫번째 사각형을 Fill 스타일로
        paint.setColor(Color.RED);
        canvas.drawRect(10, 10, 100, 100, paint);

        paint.setStyle(Paint.Style.STROKE); // 첫번째 사각형을 Stroke 스타일로
        paint.setStrokeWidth(2.0F);
        paint.setColor(Color.GREEN);
        canvas.drawRect(10, 10, 100, 100, paint);

        paint.setStyle(Paint.Style.FILL); // 두번째 사각형을 Fill 스타일로
        paint.setARGB(128, 0, 0, 255);
        canvas.drawRect(120, 10, 210, 100, paint);

        // 두번째 사각형을 Stroke로 설정하고 PathEffect 적용
        DashPathEffect dashEffect = new DashPathEffect(new float[]{5,5}, 1);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(3.0F);
        paint.setPathEffect(dashEffect);
        paint.setColor(Color.GREEN);
        canvas.drawRect(120, 10, 210, 100, paint);

        paint = new Paint();

        paint.setColor(Color.MAGENTA);
        canvas.drawCircle(50, 160, 40, paint);

        paint.setAntiAlias(true);
        canvas.drawCircle(160, 160, 40, paint);

        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(1);
        paint.setColor(Color.MAGENTA);
        paint.setTextSize(50);
        canvas.drawText("Text (Stroke)", 20, 260, paint);

        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(50);
        canvas.drawText("Text", 20, 320, paint);


        /**
         * 그리기 연산이 일어나는 영영을 설정: clipping
         * 전체 paint 객체 중 클리핑 영역으로 설정한 사각형의 일부만을 그림
         * */
        canvas.clipRect(220, 240, 250, 270);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        canvas.drawRect(220, 240,320,340, paint);
    }

}

 

---

 Canvas 객체로 호출하여 사용할 수 있는 대표적인 메서드들을 정리하면 다음과 같다.

메서드	설명
점 그리기	void drawPoint(float x, float y, Paint paint)
선 그리기	void drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
사각형 그리기	void drawRect(float left, float top, float right, float paint)
둥근 모서리의 사각형	void drawRoundRect(RectF rect, float rx, float ry, Paint paint)
원 그리기	void drawCircle(float cx, float cy, float radius, Paint paint)
타원 그리기	void drawOval(RectF oval, Paint paint)
아크 그리기	void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
패스 그리기	void drawPath(Path path, Paint paint)
비트맵 그리기	void drawBitmap(Bitmap bitmap, float left, float  top, Paint paint)