SwiftUI 그리기 컴포넌트

2023년 10월 12일 수정

≡ 목차 (Table of Contents)

도형들

Circle

동그라미

Circle().fill(Color.red).padding()

Capsule

알약 모양 동그라미

Ellipse

타원

Shape

원하는 다각형을 만들기 위해서 Shape 타입의 구조체를 작성할 수 있다.

struct SomeShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: ...)
        path.addLine(to: ..., in: ...)
        ...
        return path
    }
}

Path

위의 다각형을 그릴 때 사용하는 Path 예제를 좀 더 살펴보자.

var p = Path()
p.addArc(center: ..., radius: ..., startAngle: ..., endAngle: ..., clockwise: false)
p.addLine(to: ...)
...
p.closeSubpath()

위 처럼 쓸 수도 있겠지만 아래와 같은 식이 좀 더 Swift 답기도 하고 SwiftUI와 어울리기도 한 것 같다.

Path { path in
    path.move(to: ...)
    path.addLine(to: ...)
    path.addQuadCurve(to: ..., control: ...)
    ...
}
.fill(Color.black)

그라디언트(Gradient)

Gradient

Gradient(colors: [.red, .yellow, .green])

LinearGradient

LinearGradient(gradient: ..., startPoint: ..., endPoint: ...)

AngularGradient

AngularGradient(gradient: Gradient(...),
                center: .center,
                angle: .degrees(-90))

center 점을 중앙으로 삼고 둥글게 그라디언트를 그린다. 어디에 그리는지에 따라 최종 형상이 달라진다.

Circle().fill(someGradient)

위 코드로 눈치챌 수 있지만 그라디언트는 색(Color) 대신 사용할 수 있다.