[Swift] - UIBezierPath(베지에 경로)를 사용해보자1, UIBezierPath로 선 그리기

안녕하세요! 

아직 앱 출시 회고 및 정리도 못했는데 자꾸 다른 글을 쓰게 되네요.

언제 깔끔하게 정리해서 포트폴리오로 쓸 수 있을지...

 

 

아무튼 오늘은 UIBezierPath를 사용해보려고 합니다.

저는 UIBezierPath라는걸 처음 보고

아...이거 어떻게 발음하는거지? 라는 생각부터 들었는데요

( 발음은 검색해보니 베지에?라고 읽는것 같습니다.)

 

 

그래서 도대체 UIBezierPath가 뭐냐? 라고 하신다면

직선과 곡선으로 구성된 커스텀 뷰에 그릴 수 있는 세그먼트 경로 

라고 해석할 수 있겠네요.

 

 

더 자세하게 설명해보자면 UIKit에는 UISegmentedControl이라고 하는

아래 그림 모양의 컨트롤러가 있습니다.

 

그림은 이제 1부터 5까지니까 5칸으로 나뉘어 있지만

저걸 무수히 많은 칸으로 점처럼 쪼개서 선으로 그린다면?

그리고 그 선이 곡선이라면?

그게 세그먼트 경로인 느낌입니다.

 

이게 왜 UIBeizerPath냐면 베지에 곡선에 대해 알아야 하는데...

아래 글을 보시면 BeizerPath에 대해 정리가 정말 잘되어 있습니다.

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

중학생도 알 수 있는 베지에 곡선(Bezier Curves)

 

저도 막 완벽하게 이해한건 아니고(요즘 중학생 수준이 높네요..허허)

시작점 ~ 끝점 사이 지점의 비율의 절대값을 구하는데 그게 곡선인? 느낌으로 이해했습니다.

 

 

자 서론이 길었는데 바로 시작해보죠.

let path = UIBezierPath()

 

UIBezierPath(앞으로는 베지에 패스라고 부르겠습니다.)는 이렇게 선언할 수 있습니다.

 

그리고 이것저것 세팅해주고나면...

(.move로 시작점 좌표를 추가하고 .addLine로 다음 좌표를 추가해서

점에서 점 사이를 그리는 겁니다.)

    // 경로 너비
        path.lineWidth = 10
        
        // The shape of the joints between connected segments of a stroked path.
        path.lineJoinStyle = .round
        
        // A Boolean value that indicates whether the even-odd winding rule is in use for drawing paths.
        path.usesEvenOddFillRule = true
        
        // 시작점 좌표
        path.move(to: CGPoint(x: 100, y: 100))
        // 다음 좌표
        path.addLine(to: CGPoint(x: 100, y: 200))

        // 선 색깔 변경
        UIColor.systemYellow.set()
        
        // Draws a line along the path using the current drawing properties.
        path.stroke()

 

 

이렇게 빈 화면이 나옵니다?

 

 

아까 UIBezierPath를 

직선과 곡선으로 구성된 커스텀 뷰에 그릴 수 있는 세그먼트 경로 

 

라고 해석했는데 눈치채셨나요...

 

"커스텀 뷰"에 그릴 수 있다네요.

 

 

그래서 BeizerPathView라는 커스텀 UIView를 만들어서 위의 코드들을 담고

ViewController에서 .addSubView(BeizerPathView)를 해주었더니

 

이렇게 선이 그려졌습니다.

시작점에서 y좌표값만 100 늘었으니 저렇게 선이 그어졌겠죠?

이렇게 베지에 패스를 처음 그려보았습니다~

 

 

저는 이제 이 직선으로 원을 그려서 타이머와 연동시켜야 하는데요....

열심히 해보겠습니다 

---

++정리를 잘 해주신 아래의 블로그들 덕분에 비교적 쉽게 이해할 수 있었습니다.

항상 잘 정리된 블로그들을 보면서 정말 감사함을 느낍니다.

 

https://zeddios.tistory.com/814

iOS ) UIBezierPath (1)

https://hereismyblog.tistory.com/15

UIBezierPath 사용해보기