How to use UIBezierPath and CGPath in SwiftUI

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-use-uibezierpath-and-cgpath-in-swiftui]

 

How to use UIBezierPath and CGPath in SwiftUI

 

UIBezierPath 또는 CGPath를 사용해서 만든 기존 path가 있는 경우에 Path 구조체에서 직접 CGPath로 초기화하는 것을 가지고 있기 때문에 SwiftUI에서 사용하도록 변환하는 것은 쉬운일입니다. 

 

주의 : UIBezierPath는 macOS에서는 사용할 수 없으므로, SwiftUI 코드 크로스 플랫폼을 유지하려면 CGPath로 마이그레이션해야 합니다.

 

예를들어, 다음은 Unwrap이라는 앱의 로고를 저장하기 위해 만든 UIBezierPath 확장입니다.

extension UIBezierPath {
    /// The Unwrap logo as a Bezier path.
    static var logo: UIBezierPath {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0.534, y: 0.5816))
        path.addCurve(to: CGPoint(x: 0.1877, y: 0.088), controlPoint1: CGPoint(x: 0.534, y: 0.5816), controlPoint2: CGPoint(x: 0.2529, y: 0.4205))
        path.addCurve(to: CGPoint(x: 0.9728, y: 0.8259), controlPoint1: CGPoint(x: 0.4922, y: 0.4949), controlPoint2: CGPoint(x: 1.0968, y: 0.4148))
        path.addCurve(to: CGPoint(x: 0.0397, y: 0.5431), controlPoint1: CGPoint(x: 0.7118, y: 0.5248), controlPoint2: CGPoint(x: 0.3329, y: 0.7442))
        path.addCurve(to: CGPoint(x: 0.6211, y: 0.0279), controlPoint1: CGPoint(x: 0.508, y: 1.1956), controlPoint2: CGPoint(x: 1.3042, y: 0.5345))
        path.addCurve(to: CGPoint(x: 0.6904, y: 0.3615), controlPoint1: CGPoint(x: 0.7282, y: 0.2481), controlPoint2: CGPoint(x: 0.6904, y: 0.3615))
        return path
    }
}

 

이것은 0에서 1까지 범위로 일반화된 제어 포인트를 사용하므로, 모든 종류의 컨테이어 내부에 그릴수 있고 사용가능한 공간에 알맞게 확대할 수 있습니다. 

 

다음과 같이 SwiftUI에서 Bezier path를 최소 넓이 또는 높이로 확대하려는 변환을 만들고 path로 적용하는 것을 의미합니다.

struct ScaledBezier: Shape {
    let bezierPath: UIBezierPath

    func path(in rect: CGRect) -> Path {
        let path = Path(bezierPath.cgPath)

        // Figure out how much bigger we need to make our path in order for it to fill the available space without clipping.
        let multiplier = min(rect.width, rect.height)

        // Create an affine transform that uses the multiplier for both dimensions equally.
        let transform = CGAffineTransform(scaleX: multiplier, y: multiplier)

        // Apply that scale and send back the result.
        return path.applying(transform)
    }
}

 

모든 것이 갖추어져 있고, 원하는 모든 종류의 Bezier path를 그릴수 있습니다.

struct ContentView: View {
    var body: some View {
        ScaledBezier(bezierPath: .logo)
            .stroke(lineWidth: 2)
            .frame(width: 200, height: 200)
    }
}

 

UIBezierPath보다 CGPath로 시작하는 경우, 훨씬 쉽습니다. 

 

다음 줄이 

let path = Path(bezierPath.cgPath)

 

다음과 같이 됩니다.

let path = Path(yourCGPath)