iOS ) UIBezierPath (3) - Triangle, Circle

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

개천절....단군..리스펙...

방금 조커를 보고 왔는데........정말 이게 15세 관람가여도 되는 것인가..? 하는 의문이 드네요.

히스레저의 조커연기를 본적은 없지만..호아킨 피닉스보다 조커같을 수 있을것인가............

정말 너무 연기를 잘해서 이걸 볼 수 있는 중고등학생들이 걱정될 정도...

아무튼 너무너무..연기를 잘하시네요...너무 연기를 잘해서 출연작들을 봤는데 단 하나도 본게 없군..

Her주인공인가 보네요. Her도 봐야하는디

이번 연휴는 영화를 좀 봐야겠어요...! 

암튼 오늘 UIBezierPath를 공부를 더 해볼까 해요~

오늘은 여러가지 도형을 그려보겠습니다 XD

iOS ) UIBezierPath (1)

iOS ) UIBezierPath (2)

이전 편들을 보고 오시면 더 이해가 잘 가실 겁니다.

UIBezierPath

---

가장 흔한 도형부터 그려보겠습니다. 예를 들어 삼각형..사각형 이런것들.

여러분..!! 기초수학 지식이 있으면 UIBezierPath를 이용해서 삼각형을 그리는건 정말 어렵지 않아요..!!!

저도 move(to: )와 addLine을 알고 이제 보니까 하나도 안어렵네요 XD..

자 이런 View안에 UIBezierPath를 이용해서 도형을 그려줄게요.

일단 먼저 우리가 알아야 할 사실은..close()를 사용하지 않고 그릴 수도 있겠죠...!!!!!!!!!!! 

addLine을 3번해서요. 근데 오늘은 close()를 사용해서 도형을 그려볼거에요.

그럼 addLine을 2번만 해도 됩니다 :D

한번 차근차근 해볼까요? 

자 우리 이런 삼각형을 그리고 싶다고 생각해볼게요.

일단 UIBezierPath를 사용해서 그린다면 가장 먼저 해야 할 일은?

1. UIBezierPath객체를 만든다!

lineWidth는 그냥 줘봤음 ㅎ 무시가능

2, move(to: )를 이용하여 시작점을 지정해준다.

시작점을 저 빨간점으로 줘볼게요. 저 빨간점을 CGPoint로 변환시켜봅시다.

x와 y가 있을 테고...x는 파란색View의..그러니까 ZeddView가 될거에요.

 ZeddView의 frame의 width의 1/2. 그리고 y는 0일겁니다.

ㅇㅋ? 

그리고 다른 꼭지점들을 지정해줍시다.

저 2개.

이해 안가는 사람 없겠지..;;; 

암튼 이러고 

반드시 stroke()함수를 호출하고...!!!!!!!!!!! 빌드하면

아 짤리네??/ lineWidth가 크니까...

암튼 지금 상태로 빌드하면 이렇게 됩니다. 

왜냐? close()를 안해줬거든

빌드해보쟈

아나

삼각형!!!! 만들었죠!?!?

close가 추가됐다고 왜 이게 돼? 하시는 분들은..

iOS ) UIBezierPath (1)

iOS ) UIBezierPath (2)

를 읽고오시면 됩니다.

뭐 사각형도 너무 뻔하니;;;; 굳이 해볼필요는 없을 것 같아요?

그럼 색상을 채워봅시다.

iOS ) UIBezierPath (1)에서 색상은 UIColor클래스를 이용해서 하면 된다고 그랬죠? 

 빌드하면

(ZeddView에 background주던걸 없앴습니다; 짤려서...)

이렇게 되는데요, 

stroke()는 path의 outline만 추적한다고 그랬죠? 

제가 만약 저렇게 선으로만 이루어진 삼각형이 아니라..꽉 채워진 삼각형을 만들고 싶으면

fill()메소드로 그리면 됩니ㅏㄷ.

이렇게 하면

이렇게 채워진 삼각형을 얻을 수 있습니다.

ㅇㅋ? 

근데 문서를 보다가 문득..궁금해졌습니다.

저 오각형은 빨간색으로 채워져있고...겉에가 검정색으로 되어있잖아요? 

그럼 ㅇ오각형을 방금 한것처럼 그리고..또 outline을 위한 path를 또 그렸나...? 

바로 안되나? 

하고 실험을 해봤는데..!! 됩니당 ~.~

fill을 해주고 stroke를 해주니

짜잔!!

그럼 stroke해주고 fill 해주면요???

왜...밑에가.....왜 밑에...outline이 그려지지 않는건지는 잘 모르겠습니다....

그럼 사각형은 건너뛰고...ㅎㅎ

원을 그려봅시다!

아~~그치그치 그렇지

맞어

알지알지~~~~~~~~~ 

ㅎㅎ

ㅎㅎ...

싸인 코싸인 탄젠트~~~

ㅎㅎ............

하지만 원리를 몰라도 괜찮습니다. 

왜냐면..

이니셜라이저가 다 해줌ㅎ

써준다 ㅎ

자 이니셜라이저 중에서 뭘 써야하냐면요.

init(ovalIn: )을 쓰면 된다고 합니다...........구글이 그랬음

oval 뜻 : 타원.

정의 : 타원만들어주는 부분임

얘ㅖ는 Bézier curves의 시퀀스를 사용하여 타원에 가까운 closed subpath를 만든다고 해요. 

path는 시계방향으로 생성되는 부분

대충 함 써본다.

아 왜 계속 짤려...

암튼 아무것도 안했는데 원이...그려짐

지금은 그냥 draw의 rect를 넘겨줬는데...제가 좀 지정해볼ㄱ[ㅔ요./

아~~~ 이 ovalIn 이니셜라이저의 핵심은 "사각형"입니다.

CGRect는 결국 하나의 사각형이 주어지는거잖아요? 

그 안에 꽉차게 원 또는 타원이 그려지는 겁니다.

그럼 

이렇게 만들고 싶어요 저희는 그럼 어떤 사각형을 주면 되죠? 

저렇게 사각형을 주면 되겠네요.

ㅇㅇ

그러면 결과는..

흠 backgorund를 줘야겠군

 빨간색으로 채워볼까요? 귀찮지만 해보겠음..

흠..........사이트를 이용해서 코드를 이미지로 만들어봤는데..어떠신가요...

ㅎㅎ...전 맘에 안듬

암튼 이니셜라이저를 좀 더 볼게요.

"rounded rectangular path"

이런 느낌..

radius를 줄 수 있다...

즉..원을 만들 수 있다..!!!

width와 height가 100이니 cornerRadius를 50으로 줘볼게요.

원이 그려지게 됩니당

얘는 방금 본 이니셜라이저랑 정의가 똑같음;;;;

근데 모가 다를까요?

rect는 똑같고..corenrs를 받는데 얘가 모냐면..

사각형 코너가 있을거 아니에요. 그중 내가 원하는 코너만!!!!!!!! 둥글게 할 수 있음

ㅇㅇ

cornerRadii

얘 

얘 먼데

당연하게 corenrRadius처럼 CGFloat받을 것 같지만..

CGSize......

cornerRadii의 설명을 보면...각 코너 타원(?each corner oval)의 radius임. (아니 그럼 CGFloat받으면 되자나...)

사각형 width또는 height의 절반보다 큰 값은, width또는 height의 절반에 적절하게 고정됩니다.

?_?...

그냥 일단 해보쟈..

오....아니 근데 CGSize왜 받냐고..

역시....

아니 근데 읽어보면 내가 원하는 답 없음 ㅎ

혹시 아시는 분?

나왔다 젤 어려운거...

이거 뭔가 수학법칙을 완벽히 ㄱ꿰뚫고 있는 자만이 쓸 수 있을 것 같이 생김

인정?;;;

그래도 나름..파라미터는 괜찮아보이는군요..

center : 원의 center point. CGPoint타입임ㅎ

radius : arc(호)를 정의하는데 사용되는 원의 반지름

startAngle : arc(호)의 시작 각도 지정(라디안 단위로 측정)

endAngle: arc(호)의 끝 각도(라디안 단위로 측정) 

clockwise: arc(호)가 그려지는 방향 Bool타입인걸 보니.. clockwise가 시계방향이니 false로 주면 반시계방향이 되겠군요.

아나

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ아 결국...../돌아왔다..

아~~~~~~~~~~~ 아 이제 

알겠어요 

진짜로

아 파라미터 보고 보니까 알겠네

이건데 한번 그려봅시다!!!!!!

이건 위 그림에 대한 애플 코드 ㅇㅇ

그럼 그대로...옮겨보겠삼

일단..center는 그냥 제 맘대로 해줬음 ㅎ 내 view의 center에 있음 했어..

반지름은 pt단위인가봐요. 

시계방향으로 그려! 해줬으니.. 빌드하면?

오!!!!!!!!!!!!!!!!!!!

오...오........

오 내가 호를 그리다니........

뭔가 베지어패ㅔ스 고수가 된 느낌 ㅎ;';;;;;ㅋ;;

그럼 clockwise를 false로 줘봅시다.

왜 이렇게 길어졌어..? 라고 생각이 드신 분들은

이걸 보시면 됩니다!

네...

정말 쉬운거였구나....

쉽구나...

마지막으로 arc(호)에 색깔을 좀 채워볼까욘

아하

오늘은 여기까지!

 이 글이 도움이 되었길 바랍니다 XD

+) 다음시리즈 보러가기

iOS ) UIBezierPath (4)