[SwiftUI] Path, 도형을 그려보자!

SwiftUI Path, 도형을 그려보자!

SwiftUI에서 내가 원하는 도형을 그리고 싶을때는 어떻게 해야 할까????

CAD에서는 Line 이나 PolyLine 등을 이용해서 내가 원하는 도형을 그릴 수 있다. ㅎㅎ

SwiftUI 에도 기본적으로 사용자가 원하는 도형을 그릴 수 있는 도구를 제공한다.

바로 Path이다.

Apple 문서에 Path를 검색해서 살펴보면 다음과 같은 설명이 나온다.

The outline of a 2D shape.

음 단순하다. 2D 모양의 외곽이라고 나온다.
설명처럼 Path 를 사용하는 것도 간단하다.
가장 기본적인 설명을 보자면 외곽선들을 이어주면 내가 원하는 도형을 만들 수 있다.

Path 따라하면서 해보기!

Path는 흔히 경로라고 많이들 이해하고 있을 것이라 생각된다. (파일 경로 등)
실제 사전적인 설명으로도 Path 는 길을 의미한다.
SwiftUI에서의 Path도 길을 정의해서 사용자가 원하는 도형을 만들어 내는 것이다.

먼저 가장 기본적인 사각형을 만들어 보자!

         Path { path in
            path.move(to: CGPoint(x: 100, y: 100))
            path.addLine(to: CGPoint(x: 100, y: 200))
            path.addLine(to: CGPoint(x: 200, y: 200))
            path.addLine(to: CGPoint(x: 200, y: 100))
            path.closeSubpath()
        }
        .fill(.blue)

선이 그려지는 과정을 한번 따라가 보도록 하자.

1. 먼저 100,100 좌표로 이동을 한다.
2. 100,200 좌표까지 선을 긋는다. 그리고 이동한다.
3. 200,200 좌표까지 선을 긋는다. 그리고 이동한다.
4. 200,100 좌표까지 선을 긋는가. 그리고 이동한다.

어느정도 움직이는 과정이 이해가 되었는가? 이러한 과정으로 우리는 여러 도형들을 만들어 볼 수 있다. ㅎㅎ

Line 뿐 아니라 Arc, rect, curve, Ellipse 등 다양한 종류의 선들을 만들 수 있다. Path에 대한 자세한 설명은 Apple 문서를 통해 참고하면 좋을 것 같다.

참고문서

• https://developer.apple.com/documentation/swiftui/path