How to draw a custom path

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-draw-a-custom-path]

 

How to draw a custom path

 

SwiftUI는 Path 프로토콜을 준수해서, 사용자정의 path를 그리므로, Rectangel, Capsule, Circle 같은 동작을 하는 우리만의 도형을 만들 수 있습니다. CGRect를 받고 Path를 반환하는 path(in:) 메소드를 지원하기만 하면 되기 때문에, 해당 프로토콜을 준수하는 것은 어렵지 않습니다. 심지어, CGPath 또는 UIBezierPath를 사용해서 이전에 만들었던 path를 사용할 수 있고, 그 결과를 SwiftUI path로 변환합니다.

 

SwiftUI의 기본 Path 타입을 사용하려면, 해당 변수 인스턴스를 만들고 필요한 만큼의 포인트를 축하세요. colors, fills, stroke widths에 대해서는 생각하지 마세요 - 여기에서 원래 도형에 중점을 두고, 사용자 정의 path가 사용될때 이러한 종류의 설정이 제공됩니다.

 

예를들어, 다음과 같이 일련의 회전된 사각형을 그려서 창조적인 효과를 낼 수 있습니다.

struct SpiroSquare: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let rotations = 5
        let amount = .pi / CGFloat(rotations)
        let transform = CGAffineTransform(rotationAngle: amount)

        for _ in 0 ..< rotations {
            path = path.applying(transform)

            path.addRect(CGRect(x: -rect.width / 2, y: -rect.height / 2, width: rect.width, height: rect.height))
        }

        return path
    }
}

 

그리고나서 다음과 같이 뷰 내부에서 사용할 수 있습니다.

struct ContentView: View {
    var body: some View {
        SpiroSquare()
            .stroke()
            .frame(width: 200, height: 200)
    }
}