Canvas(캔버스), Paint(페인트) 1편

Canvas, Paint

- Canvas는 도화지라 생각하시면 됩니다.

- 도화지 그려주기 위해서 Paint를 사용하면 됩니다.

- 간단한 Draw은 canvas+paint로 가능합니다

  (좀 지나면 Bitmap과 Path를 이용해보겠습니다)

- 이번글에서는 Point와 Rect을 그려보겠습니다.

- 기본코드

public class MainActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        ViewEx viewEx = new ViewEx(this);
        setContentView(viewEx);
    }

    protected class ViewEx extends View
    {
        public ViewEx(Context context)
        {
            super(context);
        }
        public void onDraw(Canvas canvas)
        {
            Paint MyPaint = new Paint();
        }
    }
}

일단 처음에 눈에 보이는것은 setContextView에 

R.layout.main이 아닌 View를 extends한 클래스가 

들어가있습니다.

일단 지금은 Activity 전체화면에

ViewEx Class를 사용합니다.

나중에는 전체가 아닌 부분적으로 사용하는

방법에 대해 알아보겠습니다.

위에서 Canvas는 도화지라고 했듯이

코드를 보면

public void onDraw(canvas canvas)라는 

코드가 눈에 띕니다.

예 맞습니다. 보이는 그대로 저기다가

코드를 입력해주면 그대로 그려주는 겁니다

onDraw에 Paint를 선언해줌으로써

도화지+색연필 정도 

준비된 상태라고 보면 되겠네요.

다음 코드를 보겠습니다

public class MainActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        ViewEx viewEx = new ViewEx(this);
        setContentView(viewEx);
    }

    protected class ViewEx extends View
    {
        public ViewEx(Context context)
        {
            super(context);
        }
        public void onDraw(Canvas canvas)
        {
            canvas.drawColor(Color.BLACK);

            Paint MyPaint = new Paint();
            MyPaint.setColor(Color.WHITE);
            MyPaint.setStrokeWidth(30f);
            canvas.drawPoint(360, 640, MyPaint);
        }
    }
}

몇줄만 추가됬습니다.

canvas.DrawColor는 도화지의

색깔을 정해주는 코드입니다

검정색 도화지입니다.

Paint.setColor는 펜의

색깔이겠죠. 흰색 펜을 들고

Paint.setStrokeWidth는 펜의 두께입니다.

30f의 두께로 

canvas.drawPoint는 Point(점) 입니다.

canvas.drawPoint 360(x), 640(y)의 위치에

아까 들었던 두께 30f의 흰색 팬을 들고

그려보겠습니다.

화면 정가운데에 점을 하나 찍었습니다.

테스트 디바이스의 

해상도가 720X1280이라

360(x), 640(y)의

위치에 한번 찍어봤습니다.

물론 Point(점)만 있는것은 아닙니다

Reference를 보시면

Rect, Circle, Oval, Line 등등 

다양하게 있고,

설명도 아주 잘되있습니다.

이번에는

Rect을 써보겠습니다

public class MainActivity extends Activity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        ViewEx viewEx = new ViewEx(this);
        setContentView(viewEx);
    }
    protected class ViewEx extends View
    {
        public ViewEx(Context context)
        {
            super(context);
        }
        public void onDraw(Canvas canvas)
        {
            canvas.drawColor(Color.BLACK);

            Paint MyPaint = new Paint();
            MyPaint.setColor(Color.BLUE);
            MyPaint.setStrokeWidth(30f);
            canvas.drawPoint(360, 640, MyPaint);

            MyPaint.setColor(Color.RED);
            canvas.drawRect(100, 150, 200, 250, MyPaint);
        }
    }
}

뭐 별거 없고 2줄 추가됬습니다.

펜 색깔만 빨간색으로 바꿨습니다.

그리고 직사각형을 그리기 위해

canvas.drawRect을 입력했습니다.

그 다음 옆에 숫자 4개는 무엇일까요?

결과를 보겠습니다.

가운데 파란색 Point는 그대로이고

왼쪽 상단에 사각형이 하나 생겼네요

Reference를 보시면 아시겠지만

옆에 4개의 숫자는 

Left, Top, Right, Bottom입니다.

(100, 150, 200, 250)의 숫자는

화면의 왼쪽끝과 위쪽기준으로 

보시면 됩니다.

좀 더 제대로 그리고 싶었지만

졸린 관계로 끄적여서 써놨습니다.

보면 아시겠듯이 

가로(200-100), 세로(250-150)

100, 100의 정사각형입니다

숫자를 바꿔서 한번더 만들어 보겠습니다.

public class MainActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        ViewEx viewEx = new ViewEx(this);
        setContentView(viewEx);
    }

    protected class ViewEx extends View
    {
        public ViewEx(Context context)
        {
            super(context);
        }
        public void onDraw(Canvas canvas)
        {
            canvas.drawColor(Color.BLACK);

            Paint MyPaint = new Paint();
            MyPaint.setColor(Color.BLUE);
            MyPaint.setStrokeWidth(30f);
            canvas.drawPoint(360, 640, MyPaint);

            MyPaint.setStyle(Paint.Style.STROKE);
            MyPaint.setColor(Color.RED);
            canvas.drawRect(150, 200, 300, 400, MyPaint);
        }
    }
}

예 이번 숫자는 (150, 200, 300, 400) 입니다

코드만 보면 (300-150),(400-200) 

가로 150, 세로 200가 나오니

정사각형은 아니겠네요.

이번에는 못보던 Paint.setStyle이 있습니다.

()괄호에 친절히 STROKE라고 적혀있습니다.

예상했던대로 세로가 긴 직사각형이

그려졌습니다.

마지막으로 setStyle을 

바꿔보겠습니다.

public class MainActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        ViewEx viewEx = new ViewEx(this);
        setContentView(viewEx);
    }

    protected class ViewEx extends View
    {
        public ViewEx(Context context)
        {
            super(context);
        }
        public void onDraw(Canvas canvas)
        {
            canvas.drawColor(Color.BLACK);

            Paint MyPaint = new Paint();
            MyPaint.setColor(Color.BLUE);
            MyPaint.setStrokeWidth(30f);
            canvas.drawPoint(360, 640, MyPaint);

            MyPaint.setStrokeWidth(10f);
            MyPaint.setStyle(Paint.Style.STROKE);
            MyPaint.setColor(Color.RED);
            canvas.drawRect(200, 200, 300, 400, MyPaint);

            MyPaint.setStrokeWidth(5f);
            MyPaint.setStyle(Paint.Style.FILL);
            MyPaint.setColor(Color.GRAY);
            canvas.drawRect(400, 400, 600, 600, MyPaint);

            MyPaint.setStrokeWidth(20f);
            MyPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            MyPaint.setColor(Color.parseColor("#8041D9"));
            canvas.drawRect(500, 700, 700, 1100, MyPaint);
        }
    }
}

두께랑 색깔, 위치만 바꿔서

2개의 직사각형을 더 그렸습니다.

초반에 테스트 디바이스가 720x1280

설명했듯이

마지막 직사각형의 위치를

500 700 700 1100을 입력하니

거의 끝에 다 닿는걸 확인 할 수 있습니다.

Style도 코드 그대로 FILL(꽉채워라),

FILL_STROKE(꽉 채우고 + 테두리도 해라) 입니다.

그리고 마지막 직사각형의

setcolor에서는 Color.parseColor를 써줘서

원하는 색깔을 입력하였습니다.

인터넷에 색상코드표라고 치시고 

원하는 코드를 "" 따옴표 안에 넣으시면 됩니다

다음글에서는 다른 도형들과 

세부옵션에 대해 더 알아보겠습니다.