iOS ) UIBezierPath (1)

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

UIBezierPath를 써야 할 일이 생겨서 ㅎㅎㅎㅎ

UIBezierPath를 공부해보려고 해요.

일단 베지어 이 친구를 알아야 할 것 같은데요

https://blog.coderifleman.com/2016/12/30/bezier-curves/

어우 설명 너무.......진짜.............존경.....감사합니다...

설명 너무너무넘 잘해놓으심

베지어 곡선 위키 설명

베지에(베지어) 라는 사람이 만든 곡선..이라고 생각하면 되겠죠?

저 곡선 어디서 많이 봤다..라고 생각했는데

TTF? OTF? 차이점 알아보기

에서 한번 보긴 봤군요.

암튼..!!

iOS에도 UIBezierPath라는게 있는데..정확히는 UIKit안에...

뭔가 보면 베지어 곡선..그릴 수 있는 뭔가 그런 친구같죠..!? 

공부해봅시다.

어우 근데 이름 너무 간지나는거 아냐? 베지어 패스.....

UIBezierPath

---

UIKit안에 있구요. UIBezierPath라는 class입니다.

정의는 

path는 path인데...직선 및 곡선으로 구성된 path임ㅎㅎ니 custom view에서 렌더링 가능한 부분~~~

이라구 하네요..

OverView를 봅시다. 간단하게 요야ㅕㄱ해볼게요.

- UIBezierPath를 사용하여 path에 대한 "형상(geometry)"만 지정한다.

- path로 직사각형, 타원 및 호와 같은 간단한 모양 정의하거나 직선과 곡선이 혼합된 복잡한 다각형 정의 가능

- 모양을 정의한 다음에 UIBezierPath의 메소드를 사용하여 현재 drawing context에서 path를 렌더링 가능 ㅇㅇ

- UIBezierPath객체는 렌더링 중에(during rendering) path의 형상(geometry)과 path를 설명하는 attribute를 결합(combine)한다.

- geometry / attribute를 개별적으로 설정하고 서로 독립적으로 변경 가능한부분

- 객체를 원하는 방식으로 구성한 후, 현재 컨텍스트에서 객체를 그리도록 지정할 수 있음. 생성, 구성 및 렌더링 프로세스는 모두 "별개의 단계"이므로 Bézier path 객체를 코드에서 쉽게 재사용 가능 -> 동일한 객체를 사용하여 동일한 모양을 여러번 렌더링 할 수 있으며, 연속적인 드로잉 호출간에 렌더링 옵션 변경 가능.

- path의 현재 점(?..path’s current point)을 조작하여 path의 geometry를 설정하셈, 새로운 path객체를 생성할 때 현재 지점이 정의되지 않았으므로 명시적으로 설정해야함. 

아 나 개노잼

모르겠음 ㅎㅎ 일단 알아서 보시구요

뭔말인지 하나도 모르겠어서 개노잼이네요.

일단 그려보쟈

아니

아니 init만 몇개여...

일단 젤 간단한거 

ㅎ

네..여기서 저는 막혀서~~~~~~~~~찾아보니

https://developer.apple.com/library/archive/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/BezierPaths/BezierPaths.html#//apple_ref/doc/uid/TP40010156-CH11-SW2

애플의 이런 친절한 문서가~~~

1. path객체를 만드셈

만들었어욘

2. UIBezierPath 객체의 관련 드로잉 attribute를 설정하세요. 

(such as lineWidth, lineJoinStyle, usesEvenOddFillRule같은거) 

이 drawing attributes는 전체 path에 적용됩니다. 

오? 이게 위에 overView에서 본 attribute군요 

해보쟈

zzzzzzzzzzzzㅁ뭔지 모르겠는데 문서에 나온거 다 해봄..

lineWidth밖에 모르겠서...

3. move(to: )메소드를 사용해서 초기 세그먼트의 시작점을 설정하세욘

세그먼트라고 자꾸 단어가 나오는데..

....

찾아보니까..segment가 "선분"이라는 뜻을 가지고 있대요 ㅎㅎ;...

선분 : 양쪽에 끝나는 점이 있는, 직선의 부분이다. 

출처 https://ko.wikipedia.org/wiki/선분

암튼 move(to: )를 사용해서 초기 세그먼트..그니까 어떤 선이 될 시작점을 지정해줍시댜

점..이니까 

move(to:) 는 CGPoint를 받습니다. 그냥...아무렇게나 줬어요/

4. 선과 곡선 선분을 추가하여 subpath를 정의합니다. 

(Add line and curve segments to define a subpath.)

머래..

애플 코드인데..뭔가 addLine이런거 같음... 함 해보자

일단 하나만 그려줬습니다.

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

걍 이제부터 선분이라고 할까요 걍..>>???

6. 선택적으로, 3, 4, 5 단계를 반복하여 추가 subpath를 정의하세요.

흠 그럼 끝났군요.

근데 이러고 ㅅ빌드하면 당연히;;; 제가 그린게 안나오는데요. 

아까 베지어 패스 정의가

path는 path인데...직선 및 곡선으로 구성된 path임ㅎㅎ니 custom view에서 렌더링 가능한 부분~~~

네..custom View를 하나 만들어줍시다.

CAShapeLayer를 이용해서 거기 path에 bezier path를 넣어주는 방법도 있는데..이건...언젠가 보도록 할게요.

일단 내 custom View에서 하는 방법으로 해봅시당 XD

ZeddView를 만들고, draw안에서 path를 만들어주고 move해주고..close해줍시다.

그리고

ViewController에서 ZeddView를 add해줄게요. 

ㅎㅎ

ㅎㅎ

ㅎ

ㅎㅎ

ㅋ

ㅎㅎ

네..오ㅔㅐ 안나올까..

우리가 예상한게 나와야 할텐데 말이죠.

우리가 그린 세그먼트(?)를 봅시다.

이해가 잘 안되시는 분들을 위해서 그림을 좀 그려볼게요.

먼저 ZeddView는 self.view.frame의 위치, 크기를 가지므로 View에 꽉차게 될거에요. 

이렇게요.

그리고

네 move 메소드를 호출해줬습니다. move가 위에서 뭐랬죠?

move(to: )메소드를 사용해서 초기 세그먼트의 시작점을 설정하세요. <

move메소드의 문서를 보면서..자세히 보면 좋겠지만 

일단 저는 "시작점"을 지정해준다!! 라고만 이해하고 넘어가겠습니다.

제가 CGPoint(x: 0, y: 0)을 줬어요!!!!

ZeddView가 self.view의 frame을 가지므로 origin이 똑같겠죠? origin은 (0, 0)일꺼니까..

아무튼 저희의 세그먼트는 저 빨간점을 "시작점"으로 가지겠네요.

그리고 addLine을 사용해서 subpath를 그려줬습니다.

CGPoint(x: 30, y: 100)으로 줘봤습니다.

흠

그럼 점과 점을 이어봅시다. 이 잇는 작업은 close메소드가 해준다고 그랬죠? 

close는 좀 더 정확한 뜻을 보기위해ㅔ 잠깐 문서를 볼게요

"This method closes the current subpath by creating a line segment between the first and last points in the subpath."

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

네 이렇게 하면..!!

짠!!!

근데 지금 우리는 안나오고 있는 상태자나요 퓨ㅠ 왜 안나올까요..?

UIBezierPath의 OverView를 다시 읽어봅시다.

"After configuring the geometry and attributes of a Bézier path, you draw the path in the current graphics context using the stroke() and fill() methods."

bezier path의 geometry와 attributes를 구성한 뒤에, 

stroke() 및 fill()메소드를 사용하여 현재 그래픽 컨텍스트에서 path를 그려줍니다.

stroke메소드는 현재 stroke color와 bezier path객체의 attribute를 사용하여 path의 outline을 추적합니다..?(traces the outline of the path) 

마찬가지로 fill메소드는 현재 fill color를 사용하여 path로 둘러싸인 영역을 채웁니다. UIColor클래스를 사용하여 stroke, fill 색상을 설정하세요.)

아하~₩

저는 지금 선분 하나를 그리는 거니까..음 그니까 fill메소드를 사용해서 채울 영역이 없으니까 stroke를 사용해볼게요.

빌드하면?

오~~~~~~~!!!!!!!!!!!!!!!!!!!!!!!!!!

오 그려써

오..

네 그럼 색상도 줘봅시다.

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

오늘은 이정도에서 끝!

이제부터 글을 좀 짧게짧게 작성하려구 합니다.

제 예전글들을 읽는데 내가 왜 이렇게 썼지..? 이게 이해가 간다고..? 하는 글이 넘 많아zzzzz

미래의 저를 위해...좀 자세하고 짧게ㄱ짧게...

+) 다음시리즈 보러가기

iOS ) UIBezierPath (2)