iOS ) UIBezierPath (4) - Pie chart

안녕하세요 :) Zedd입니다.

벌써 4편이라니....정말 저는 글로 정리하면서..공부하는게 제일 잘 맞는것 같아요.

뭔가ㅎ...뭔가 성장한 느낌이 드는군..

오늘은 뭘 해볼거냐면...

ㅇ저번 3편에서 원을 그렸었자나요~~

오늘은..이 원을 응용한 파이 차트를 그려볼까합니다.

제가 만들건...도넛차트/...라고 할 수 있겠네요.

가운데 구멍 있는거!!

ㅎ

ㅡ

ㅁ

어케만들지?

3편에서 만든거는

이건데....내가 원하는건 이렇게 채워지는게 아니라 zzzz

뭐 저렇게.....

엥????

뭐야

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

아나..무 ㅓ야...

addArc라는 메소드가 있군요..!!!

그렇다면

이렇게 하면 호가 만들어진다는거죠?

아하...이니셜라이저로 꼭 안만들어도 되는군요..!!

암튼..파이차트 이야기로 다시 돌아오면..

어케만들지..?

우리의 지금 문제가

이렇게 지금 그려지는게 문제잖아요? 

UIBezierPath의 원리(?)라고 해야하나..그려지는 방식에 대해 이해하면 이 문제를 해결 할 수 있습니다.

ㅋ...발그림 ㅈㅅ

암튼 저렇게 중간에 점을 잡고, 호의 양끝과 이어지면 우리가 원하는 그림이 될텐데요...

점...???

ㅇㅇ

move(to:)

center를 시작점으로 하고 호를 그려줍니다.

그리고 stroke()하면?

엇 center와 저기(?)가 이어지지 않았잖아요.

이거 뭐로 해결한다?

ㅇㅇ

근데 지금 보니까...!

지금 우리가 close()안하고 stroke()로 그려줬잖아요. 그래서 center랑 안이어졌었잖아요?

근데 stroke()말고 fill()로 하면 close()를 안해도 되네욥

이렇게..!!!

오 ㅎㅎㅎ 드디어 파이차트의...한 조각을 그렸네요.

자 그럼 전체 파이차트를 그려볼게욘!!!!

일단 숫자 필요함

음 그러니까 비율이 필요합니다.

맞죠?

나중에..CGFloat으로 캐스팅 하기 귀찮아서 아예 만들때 [CGFloat]으로 만드는게...편한것 같습니다?

total값도 필요합니다. 

자...우리가 그려야 할 건 뭐다?

파이차트 ㅇㅇ

결국 addArc메소드를 사용해야 할텐데..

우리 위에서 봤다시피 addArc는 startAngle과 endAngle을 받죠.

이 파이차트들을 봐봅시다.

뭐 어디가 startAngle인지는 확실하지 않습니다만......그냥 말해볼게요.

애초에 원이라 어디가 start냐???가 의미가 없는것 같음.

11시 방향부터 시작한데도 있고, 12시 부터 시작한 곳도 있고... 

네 그러니까..제가 하고싶은 말은..

startAngle을 정해야 한다는거죠!! 

그래 원을 그릴건데 어디서부터 그릴건데???

위 coordinate system을 참고하여..

출처 : https://www.raywenderlich.com/411-core-graphics-tutorial-part-1-getting-started

저는 270도부터 그리겠습니다.

근데....270도부터 270도까지 그릴 수 없으니까 한쪽은 -가 되어야함

 

일단 startAngle을 -π/ 2로 해주겠삼 endAngle이 결국 3π / 2가 될거라서..

https://github.com/Zedd0202/UIBezierPath-Pie-Chart/tree/master

ㅎ

ㅡ

ㅁ

일단 repo 만들었어요. 참고하세용!!

이걸 그려봤는데요. 

이 파이차트를 그리는 핵심 로직은

이 코드입니다. 

endAngle의 수식은...그러니까 음..지금 total이 100이잖아요? [10, 20, 70].

0.1 * 360을 하면 얘가 가야할(?) 각도가 나오니깐.. endAngle이 저렇게 구해지는 겁니다.

그리고 bezierPath객체를 만든뒤, 시작점을 지정해주고, addArc로 호를 그려줍니다.

그리고 colors배열에 제가 색상을 담아놨어요 거기서 무작위로 골라서 색상을 set해주고 

fill메소드를 호출해 그려줍니다.

그리고 startAngle에 구한 endAngle을 더해서 startAngle을 업데이트 해줍니다.

그럼 이 상태에서 도넛차트를 만들어보겠습니다. 

일단 지금 상태에서 도넛차트를 만들려면..가운데에 그냥 하얀색 원을 그려주면 될 것 같아요. 

이렇게 그려주면...!!

이렇게 된당..!!! 저 하얀색 원은 차트를 그려주고 난 "후에" 그려줘야 합니다. 

전에 그리면 원이 그 위에 그려지게 됨..

자..그럼 이 급 도넛차트가 된...차트를 좀 더..제 맘대로 해볼게요.

저렇게 차트 사이사이에 space를 넣어줘볼게요.

이건 어떻게 하면 될까요? 

네..!! stroke로 outline을 하얗게 따주면(?) 될 것 같아요. 

요 코드를 추가해볼게요.

오...! 손쉽게 되네요.

근데 하나 거슬리는건

이 부분........다른 space보다 더 작게[ 나오는 이유가 뭐지..??

lineWidth를 줘볼게요. 지금은 기본값으로 1로 들어간 상태겠죠?

아 뭐지...??

ㅡㅡ

그래 항상 꼭 하나는 내 맘ㅇ대로 안되지..

아니 왜 저기만.....엇 근데 오버워치 로고 느낌...

헉!!!! 해결했어용!!!!!!

close() 때문이었서..

왜지..? 왜지...

암튼 close()를 추가해주면...!!

ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

다해따

저도 이제 파이차트 그릴 줄 알게 되었어요..

이제 알아......

I know....

최종 코드는

https://github.com/Zedd0202/UIBezierPath-Pie-Chart/tree/master

에 있으니 참고하시길 바래요 XD

+) 다음시리즈 보러가기

iOS ) UIBezierPath (5)

+ ) 아 맞아..!! 원래 글 쓰면서 말할라고 그랬는ㄷ[ ㅠㅠㅠ

오늘 시리의 생일이에요!!

축하해줍시다 XD