drawArc 부채꼴, 호를 그려보자 (+RectF)
ㆍ drawArc를 이용해서 부채꼴과 호를 간단하게 그려보도록 하겠습니다.
먼저 간단하게 아래와 같이 부채꼴과 호를 만들어보겠습니다.
으흠.. 너무 대충 만들었나..
어쨋든.. 그리는 방법이 중요하니까 차근차근 만들어보겠습니다.
이건 많이 만들어봤으니까 코드만 쫙 보도록 하겠습니다.
먼저 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); } }
이제 기본셋팅을 마쳤으니 그려보도록 하겠습니다.
먼저 설명하기 전에 위에 보여드렸던 결과사진 코드를 먼저 공개하도록 하겠습니다.
[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를 이용해서 아래와 같은 화면을 만들어보도록 하겠습니다.
복잡할것 같지만 코드를 보게 되면 어렵지 않다는걸 알 수 있습니다!!
출처: http://itpangpang.xyz/321?category=553917 [ITPangPang] |