drawArc 부채꼴, 호를 그려보자(+RectF)

drawArc 부채꼴, 호를 그려보자

(+RectF)

ㆍ drawArc를 이용해서 부채꼴과 호를 간단하게

    그려보도록 하겠습니다.

    먼저 간단하게 아래와 같이

부채꼴과 호를 만들어보겠습니다.

으흠.. 너무 대충 만들었나..

어쨋든.. 그리는 방법이 중요하니까

차근차근 만들어보겠습니다.

먼저 Custom View를 만든다

이건 많이 만들어봤으니까

코드만 쫙 보도록 하겠습니다.

먼저 MyView라는

Class 파일을 하나 만들겠습니다

[MyView.java]

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View
{
    public MyView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
}

그리고 이제 layout.xml에

위에 MyView를 넣으면 되겠죠?

[activity.xml]

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.drawarcex.MainActivity">
    <com.tistory.itpangpang.drawarcex.MyView
        android:id="@+id/myView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</RelativeLayout>

이제 MainActivity로

와서 MyView에 접근해서

사용하면 되겠죠

[MainActivity.java]

public class MainActivity extends AppCompatActivity
{
    MyView myView;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myView = (MyView)findViewById(R.id.myView);
    }
}

이제 기본셋팅을

마쳤으니 그려보도록 하겠습니다.

RectF, drawArc

먼저 설명하기 전에

위에 보여드렸던

결과사진 코드를 먼저

공개하도록 하겠습니다.

[MyView.java]

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View
{
    public MyView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        Paint pnt = new Paint();
        pnt.setStrokeWidth(6f);
        pnt.setColor(Color.parseColor("#FF0000"));
        pnt.setStyle(Paint.Style.STROKE);

        RectF rect = new RectF();
        rect.set(200, 200, 600, 600);
        canvas.drawArc(rect, (270), 290, false, pnt);

        rect = new RectF();
        rect.set(300, 700, 700, 1100);
        canvas.drawArc(rect, 0, 290, true, pnt);
    }
}

(값은 픽셀값이니 때문에 디바이스 마다 차이가 있습니다)

자 먼저 이전에도 설명했고

어렵지 않은 Paint를 먼저 보겠습니다.

Paint pnt = new Paint();

Paint를 사용하기 위해 객체를 생성합니다.

pnt.setStrokeWidth(6f);

선 굵기 입니다.

pnt.setColor(Color.parseColor("#FF0000"));

색깔입니다.(빨간색으로 설정했습니다)

pnt.setStyle(Paint.Style.STROKE);

테두리만 그리겠다는 의미입니다.

(FILL로 넣게되면 아래와 같이 됩니다)

자

그 다음은 RectF에 대해

알아보도록 하겠습니다

아마 이번글에서 그나마 가장

어려운 부분이 아닐까 생각합니다.

RectF rect = new RectF();

이 부분은 그냥 넘어가도 되겠죠?

rect.set(200, 200, 600, 600);

이 부분은 9개월전에 썼던 글에 나와있는데

http://itpangpang.tistory.com/94

rect.set(left, top, right, bottom);

각 값은 왼쪽, 위, 오른쪽, 아래의 좌표를

나타냅니다.

200, 200, 600, 600이란 말은

제가 참 미적감각이 없지만

위와 같은 말입니다.

왼쪽은 200부터 시작하고

위쪽도 200부터 시작해서

오른쪽은 600까지 그리고

아래는 600까지 그려라

결과적으로는

가로 400, 세로 400인

정사각형이 그려지는 거겠죠?

이 방식대로 2번째 rectF를 보면

rect.set(300, 700, 700, 1100);

왼쪽 꼭지점 좌표(300, 700) : 2사분면

오른쪽 꼭지점 좌표(700, 300) : 1사분면

왼쪽 아래 꼭지점 좌표(300, 100) : 3사분면

오른쪽 아래 꼭지점 좌표(700, 100) : 4사분면

위 위치에 존재하는

가로 400, 세로 400인 정사각형이 만들어집니다.

자 그럼 이제 마지막으로

drawArc를 보도록 하겠습니다

drawArc(rect, 270, 290, false, pnt);

이 부분은 쉽게 생각하시면 됩니다.

레퍼런스를 보면

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint pnt)

이렇게 나와있습니다.

RectF : 위에 나와있는 rect 사각형 안에 원을 그린다.

startAngle : 시작 각도입니다

sweepAngle : 몇 도 그릴지 정합니다(시계반향)

useCenter : 맨 위 결과화면을 보면 됩니다(false : 호, true : 부채꼴모양)

Paint : 위에서 설정한 빨간색 6f의 두께로 테두리를 그려줍니다

여긴 뭐 설명을 보기보다는

숫자를 때려 박아가면서 이해하면

편합니다.

drawArc( , 270, 290,  ,  );

숫자가 가장 중요하니 여기만 보자면

각도를 이렇게 정해져있습니다.

그리고 위에 말했듯이 시계 방향입니다.

270, 290은 처음부터 너무 애매하니.. 쉽게

drawArc( , 0, 90,  ,  );

drawArc( , 0, 180,  ,  );

2가지를 그려보면

위에는 0도에서 펜을 콱 찍어서

90도를 시계 방향으로 돌린 결과입니다.

아래는 0도에서 펜을 콱 찍어서

180도까지 시계 방향으로 돌린 결과입니다.

자 그럼 이번엔 좀 더 바꿔서

drawArc( , 90, 90,  ,  );

drawArc( , 180, 90,  ,  );

이 결과를 한번 볼까요?

예상했던 결과인가요?

첫번째는 90도에서 펜을 콱 찍어서

90도 돌린 결과입니다.

두번째는 180도에서 펜을 콱찍어서

90도 돌린 결과입니다.

여기서 헷갈리면 안되는게

두번째 즉 sweepAngle은 (몇도를!)

돌릴지 입니다.

위 원 그림에서 180도에서 시작해서 90도

있는곳까지 그려라가 아니라

콱 찍은 시점에서 시계 방향으로

90도를 돌려라! 라는 말입니다.

자 일단 여기까지 기본설명을

마쳤습니다.

원래 Thread 돌리면서

drawArc 활용하는 방법도 쓰려고

했는데 생각보다 길어질것 같아서

다음글에서 써보도록 하겠습니다.

다음글에서 만들어 볼 화면은

위에서 배웠던 drawArc를 이용해서

아래와 같은 화면을 만들어보도록 하겠습니다.

복잡할것 같지만

코드를 보게 되면

어렵지 않다는걸 알 수 있습니다!!