iOS ) UIBezierPath (2) - Attribute

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

BezierPath두번째 공부~~~

꼭 iOS ) UIBezierPath (1) 을 보고오셔야 이 맥락이 이해가ㅡ 가실거에요

UIBezierPath (2) 

---

오늘은 뭐 해볼거냐면

저번에 선 하나 그렸자나요 

ZeddView를 self.view.frame에 해줬었는데, 그냥 center에 width, height 200주고 해줬음 

암튼 중요한건 저렇게 선까지 그리고 끝냈었는데,

오늘은 이 선을 좀 더 길게 길게..그려볼게요.

그럼 여기서, addLine을 몇번 더 해주면 될 것 같죠?

일단zzzㅈㅔ가 UIBezierPath를 잘 몰라서..제 삽질도 같이 올리도록 할게요.

키노트로 그림을 그려가면서 좀 해볼게여ㅛ.

이렇게 원래 있었자나요. 그래서 저는

 

addLine을 이렇게 추가해주면 지금

이렇게 될거라고 예상했거든요. 

근데 빌드를 해보니..

이렇게 나오게 되었습니다.

(40, 50)과 (0, 0)이 이어지는건 생각을 못했는데..왜 이어졌을까요?

ㅇ ㅏ~~~~~~~~~~~~~~~~~~~~~

아 한참을 찾았는데..이제야 알았습니당..ㅎㅎ...

네..저만 이렇게 생각한건 아니겠죠..??? 

결과적으로 close()때문인데요!!!!!!!!

iOS ) UIBezierPath (1) 에서..

close()를 봤을 때..

 close메소드는 subpath의 첫번째 지점과 마지막 지점사이에 선분을 만들어 현재 subpath를 닫습니다.

이때는 addLine을 하나만 해준 상태라...잘 안와닿았지.....

네..첫번째 지점과 마지막 지점사이에 선분을 만들어 준다네요. 음 그러니까 꼭 "첫번째" 지점과 "마지막" 지점을 이어 선분을 만들어준다는 의미보다는

첫번째부터 마지막까지 생긴 점들이 있을거 아니에요? 그 점들 사이 간에 선분을 만들어준다~~ 이느낌 같아요.

암튼 그래서 첫번째 점인 (0, 0)과 제가 마지막으로 addLine해준 point인 (40, 50)이 이어진것이죠.

그럼 close()를 없애봅시다.

이렇게 close()를 빼고 빌드하면...!!

이렇게 제가 원하는대로 잘 나오게 되네요.!!!!!!!!!!!!!!

저는 close()메소드를 꼭!!!! 호출해줘야 하는 줄 알았어요. 

그래서 1편에서

5. 선택적으로(Optionally), close를 호출하여 subpath를 닫으세요. close는 마지막 세그먼트(선분)의 끝에서 첫번째 세그먼트(선분)의 시작까지 직선 세그먼트(선분)을 그립니다.

여기서, Optionally가 왜있지..? 라고 생각했었는데..

그래서 있는거군...

addLine을 계속 호출해서 이런 line chart를 만들 수도 있겠군요,,,!!!

이거 많이 어렵지가 않구나....

저는 엄청 어려운 작업이고 막..엄청..

drawing cycle을 완벽히 파악한...코어 그래픽의 인재..

후후 내가 가진 코어 그래픽 지식으로 그래프를 그려볼까? 

하하 베지어패스 이자식~~!!~~ < 

이런건줄 알았는데 아니군 ㅎ

저는 이걸 그리면서..오늘 글을 마무리 하려고 했는데, 의외로 너무 쉽군요.

그러며는~~

선도 몇개 그렸겠다 attribute들을 살펴봅시다.

UIBezierPath에 attribute는

한 이정도 있는것 같은데요, 흠 다 볼 수 있을지는 모르겠지만 일단 보겠씁니다

1. lineWidth

이거는 너무 쉽다

Line의 width..

lineWidth에 대한 재밌는 사실들이 있네요.

먼저 기본값은 1.0이라는 것!

그리고 만약 lineWidth을 0으로 주게되면

특정 디바이스에서 렌더링 할 수 있는 가장 얇은 선(the thinnest line)으로 해석된다고 합니다. 

0으로 줘보면..

가장 얇은 선으로 나온대매...

시뮬이라 그런가...

암튼 다음

2. lineCapStyle

아니 정의..이해 못하겠음.

lineCapStyle은 open subpaths(열려있는 subpath들)의 시작점과 끝점에 적용되는거임

closed subpaths에는 영향 ㄴㄴ

기본 lineCapStyle은 CGLineCap.butt임.

엥..뭐길래....

함 해봅시다.

3개 있네요.

3개 일단 다 봅시다.

butt, round, square순.

아니 butt이랑 square 다른점이 뭔데요

정의는 다르군요. 알아서 보세요.

3. lineJoinStyle

stroked path의 연결된 세그먼트 사이의 joint 형태,,>?

이것도 일단 함 보자

참고로 기본값은 miter라고 하네요.

miter, bevel, round순.

저 세그먼트가 연결된 부분을 자세히 보시면 됩니다.

round는 lineCapStyle round랑 같이 쓰면 이쁘겠네요.

귀여워짐ㅎㅎ

 

4. miterLimit

엥 머지

이것도 세그먼트 사이의 접합부에서 "스파이크"를 방지하는데 도움이 되는 제한값?이라고 하는데..스파이크가 먼데

뭔가..아니 그냥 뭔가..스파이크 라고 하면 뭔가 

확 튀는??? 확....확......이거 뭐라해야하지?

암튼 그런 느낌이라 좀 확 튀게 실험을 해봤습니다.

dㅏ니 근데 miterLimit이

받을 수 있는게 너무 많은데요?

dㅏㅁ튼

확 튀게 해봤습니다. 뭔가 스파이크가/.....난 느낌으로,,,,

젤 만만한 파이씨

오..

아무것도 안준거랑 pi준거!!!

뭔가 뾰족!!!!한 부분이 뾰족...?하게 됐습니다.

아 ~~ overView에 "급등"이라고 나오네용

뭐 overView는 알아서 보시길 ㅎ

5. flatness 

보자마자 평평한 느낌 

넘 평평해!!!

근데 정의는

curved path 세그먼트의 렌더링 정확도(accuracy)를 결정하는요소....

아니

흠

흠..해보니까 직선 path라 그런지 안먹네요.

일단 그럼 곡선.................곡선을 만들자..

근데 여기서 곡선을 만들 순 없습니다.

flatness는 다음에 보도록 하죠.

6. usesEvenOddFillRule

even-odd winding rule이 path에서 사용중인지 여부를 나타내는 Boolean이라는데...

ㅎ

ㅎㅎㅎ!!!!

네 

 usesEvenOddFillRule..

흠..

네

화이팅!!!

그리고 2개가 남았는데..

setLineDash만 보겠삼

7. setLineDash

일단 뭔가 선을 dash스타일로 만들어주는 칭구..인가

dash style이라 함은 ㅡ ㅡ ㅡ ㅡ 이런 느낌

암튼 함 보겠습니다

일단 정의는 이렇구요.

pattern과 count, 그리고 phase를 받는 군요. 

pattern : 패턴의 선분 길이과 간격을 포함하는 부동소수점 값의 C스타일 배열!!! 이 들어간다고 해요. 배열의 값은 첫번째 선분(세그먼트) 길이부터 시작하여, 첫번째 간격 길이, 두번째 선분 길이 등이 번갈아 나타난다고 함

count는 pattern에 있는 값들의 수

phase는 간단하게 말해서 시작 offset.

일단 항상 그렇죠. 

말로 하면 모름

그려봅시다

일단 패턴!!!!!!!!!!!!!!!!!!!!! 패턴이 젤 중요합니다.

패턴이 모랬어요. "선분 길이와 간격"을 포함하는 부동소수점 값의 배열...

ㅇㅋ

만드삼

[1, 10] = 난 선분길이가 1이었음 좋겠고 간격은 10이었음 좋겠어

count는 패턴의 수라고 했고, phase는 뭔지 모르겠으니..0으로 줘봅시다.

그리고 빌드 ㄱ

에엥

그럼 정정하겠습니다

선분길이는 10이고 간격은 1로

정정하겠습니다. [6, 3]정도가 좋겠어..

어때요!!! 좀 해보니까 무슨 뜻인줄 알겠죠!!!!!

6 그린다음에 3 간격주고 또 6그리고...이게 반복되는거에요!!!

그럼 만약에 제가

이렇게 넣으면 어떻게 될까요?

간단해요. 6은 첫번째 세그먼트의 길이, 3은 첫번째 세그먼트의 간격, 1은 두번째 세그먼트의 길이, 10은 두번째 세그먼트의 간격. 

보면?

하나하나 보면 됩니다. 6그려! 3쉬어..1그려!!! 10쉬어...

이느낌

아시겠죠

이느낌으로 가면 됩ㄴ다.

count를 좀 볼까요? 지금은

이렇게 pattern의 count를 주고있자나요~~

이걸 2로 한번 줘보겠스빈다.

결과가 어떻게 나오는지..예상하신 분들도 계시겠죠?

네 뭔가 문서에는 그냥 pattern의 count..라고만 나와있는데,

 뭔가 pattern에서 어디까지 쓸건지(?)를 나타내주는것 같아요.

음 어디까지 쓸건지라고 하면 좀 그런가

주기를 몇으로 돌린건지..? 원래 4였는데 2로 돌리겠다..이거 같은데..

뭐 아닐수도 있지만..

[6, 3, 1, 10]에서 count를 2로 한게 위 결과고

[6, 3]에서 count를 2로 한게

요겁니다.

똑같죠? 

하나만 더 해볼까요? 

pattern의 count는 4지만 3을 줘보겠습니다.

근데 주의해야 할 점이 있어요.

시작해보겠습니다.

6그려 3쉬어 1그려가 일단 되겠죠?

근데 1그려!! 다음에 6그려가 아니라!!!!!!!!!!!! 6쉬어가 나오게 됩니다.

그려-쉬어 이 순이니까

6그려 3쉬어 1그려 6쉬어 이렇게 되죠. 홀수라 이렇게댐 ㅎ

그림 보시면서 그려 쉬어..해보시면 됩니다.

그럼 phase를 봅시다.

제가 정의를 말할때 시작 offset이라고 했는데..좀 자세히 봅시다.

문서에서 예제로 준게 있는데...

"For example, a phase value of 6 for the pattern 5-2-3-2 would cause drawing to begin in the middle of the first gap."

패턴이 [5, 2, 3, 2]에서 phase 6은 첫번째 간격의 중간에서 그리기를 시작하는 부분임

라고 합니다.

그럼 [5, 2, 3, 2] 로 해보자

자.. 잘 보셔야 합니다.

일단 좀 시작부분이 다르네요.

이게 음...제가 설명이 이게 맞는건지 확실히 모르겠는데...

제가 여러가지로 실험해본 결과를 그냥 적을게요.

아닐 수도 있다는 점...!!!!!!

암튼 제가 이해한 phase는 뭐 간단합니다.

일단 다 그려져있다고 생각하세요. 다 그려져있는데 phase value만큼의 offset에서 그냥 짜른겁니다.

잘 이해가 안가실 수도 있는데...제가 좀 극단적인 예를 가지고 왔어요. 

이렇게 패턴 [5, 2, 20, 2]와 phase를 줬습니다.

일단 5그려 2쉬어 20그려 2쉬어 < 를 해줬습ㄴ다. 

아무튼 phase가 22니까 시작 offset이 22인겁니다. 그때부터 그리는거임

이렇게

그러면??

저 점선부터 ㅣ시작하는 거임

빌드된 결과는?

ㅇㅇ

아 나 그림까지 그려가면서 한건데..

이거 아니면 큰일나는디....

zzzz아니면 꼭 알려주세요!!! XD

아무튼 오늘 UIBezierPath로 line도 그려보고...attribute도 공부했네요.

모두모두 UIBezierPath 고수가 되어봅시댜

저는 금요일에도 쉬어서...

목금토일 쉰다!!!!!!!!!!!!!!!!!!!!!!! (자랑)

모두 연휴 잘보내시길~.~

+) 다음시리즈 보러가기

iOS ) UIBezierPath (3)