사용자가 랜드마크를 방문할 때 얻을 수 있는 배지를 만들어보자. 이번 튜토리얼에서는 경로와 모양을 결합해 배지를 만드는 과정을 안내하며, 그 이후 위치를 나타내는 다른 모양과 오버레이해서 나타내본다. 다양한 종류의 랜드마크에 대해 여러 개의 배지를 만들기 위해서는 오버레이된 심볼을 사용하거나 반복 횟수를 변경하거나 각도와 크기를 변경해볼 수 있다.

Section 1. Create Drawing Data for a Badge View

배지를 만들기 위해 배지의 배경이 될 육각형 모양을 그리는 데 사용할 데이터를 정의해보자.

HexagonParameters.swift

struct HexagonParameters {
    struct Segment {
        let line: CGPoint
        let curve: CGPoint
        let control: CGPoint
    }
    
    static let adjustment: CGFloat = 0.085
    
    static let segments = [
        Segment(
            line:    CGPoint(x: 0.60, y: 0.05),
            curve:   CGPoint(x: 0.40, y: 0.05),
            control: CGPoint(x: 0.50, y: 0.00)
        ),
        Segment(
            line:    CGPoint(x: 0.05, y: 0.20 + adjustment),
            curve:   CGPoint(x: 0.00, y: 0.30 + adjustment),
            control: CGPoint(x: 0.00, y: 0.25 + adjustment)
        ),
        Segment(
            line:    CGPoint(x: 0.00, y: 0.70 - adjustment),
            curve:   CGPoint(x: 0.05, y: 0.80 - adjustment),
            control: CGPoint(x: 0.00, y: 0.75 - adjustment)
        ),
        Segment(
            line:    CGPoint(x: 0.40, y: 0.95),
            curve:   CGPoint(x: 0.60, y: 0.95),
            control: CGPoint(x: 0.50, y: 1.00)
        ),
        Segment(
            line:    CGPoint(x: 0.95, y: 0.80 - adjustment),
            curve:   CGPoint(x: 1.00, y: 0.70 - adjustment),
            control: CGPoint(x: 1.00, y: 0.75 - adjustment)
        ),
        Segment(
            line:    CGPoint(x: 1.00, y: 0.30 + adjustment),
            curve:   CGPoint(x: 0.95, y: 0.20 + adjustment),
            control: CGPoint(x: 1.00, y: 0.25 + adjustment)
        )
    ]
}

Section 2. Draw the Badge Background

SwiftUI의 graphics API를 사용해 배지 모양을 커스텀해보자.

Path

@frozen struct Path

2D 모양의 외곽선

move(to:)

mutating func move(to p: CGPoint)

subpath를 새 위치(point)에서 그리기 시작한다.

move(to:) 메서드는 가상의 펜이 해당 영역 위를 가리키며 그리기 시작하기를 기다리는 것처럼 도형의 경계 안에서 커서를 이동시킨다.

GeometryReader

@frozen struct GeometryReader<Content> where Content : View