polyline custom

이동경로 custom 하기

목차

1. 'locations' 변수 생성 2. Path로 이동경로 그리기 3. Gesture 구현하기

'locations' 변수 생성

• CLLocationCoordinate2D 타입의 좌표 배열을 생성합니다.

    let locations = [
        CLLocationCoordinate2D(latitude: 36.01719, longitude: 129.31855),
        CLLocationCoordinate2D(latitude: 36.01691, longitude: 129.3181),
        CLLocationCoordinate2D(latitude: 36.01663, longitude: 129.31851),
        CLLocationCoordinate2D(latitude: 36.0169, longitude: 129.31887),
        CLLocationCoordinate2D(latitude: 36.01719, longitude: 129.31855),
    ]

Path로 이동경로 그리기

• locations 배열에 담긴 데이터들을 Path로 그립니다.
• 위도, 경도를 기준으로 x,y좌표를 구합니다.
• 현재는 scale을 100000 으로 설정하였는데, 이 값이 커질 수록 그려지는 line이 커집니다.

    private var drawLine: some View {
        Path { path in
            for (index, location) in locations.enumerated() {
                let point = CGPoint(
                    x: UIScreen.main.bounds.width / 2 + CGFloat(location.longitude - locations[0].longitude) * 100000,
                    y: UIScreen.main.bounds.width / 2 - CGFloat(location.latitude - locations[0].latitude) * 100000
                )
                if index == 0 {
                    path.move(to: point)
                } else {
                    path.addLine(to: point)
                }
            }
        }
        .stroke(Color.orange, lineWidth: 5)
        .aspectRatio(contentMode: .fit)
    }

Gesture 구현하기

• path의 위치를 변경시키기 위한 DragGesture를 생성합니다.
• path의 각도를 변경시키기 위한 RotationGesture를 생성합니다.
• path의 크기를 변경시키기 위한 magnificationGesture를 생성합니다.

    @State private var scale: CGFloat = 1
    @State private var lastScale: CGFloat = 0
    @State private var offset: CGSize = .zero
    @State private var lastStoredOffset: CGSize = .zero
    @State private var angle: Angle = .degrees(0)
    @State private var lastAngle: Angle = .degrees(0)

    private var dragGesture: some Gesture {
        return DragGesture()
            .onChanged { value in
                let translation = value.translation
                offset = CGSize(
                    width: translation.width+lastStoredOffset.width,
                    height: translation.height+lastStoredOffset.height
                )
            }
            .onEnded { value in
                lastStoredOffset = offset
            }
    }
    
    private var rotationGesture: some Gesture {
        return RotationGesture()
            .onChanged { value in
                angle = lastAngle+value
            }
         .onEnded { value in
             withAnimation(.spring) {
                 lastAngle = angle
             }
         }
    }
    
    private var magnificationGesture: some Gesture {
        return MagnificationGesture()
            .onChanged { value in
                let updatedScale = value + lastScale
                scale = (updatedScale < 1 ? 1 : updatedScale)
            }
            .onEnded { value in
                withAnimation(.easeInOut(duration: 0.2)) {
                    if scale < 1 {
                        scale = 1
                        lastScale = 0
                    } else {
                        lastScale = scale-1
                    }
                }
            }
    }

• Path에 gesture를 추가하고, 크기, 위치, 각도가 gesture에 따라 변경되도록 설정합니다.
• rotationGesture와 magnificationGesture를 동시에 인식할 수 있도록 magnificationGesture는 'simultaneousGesture'로 선언합니다.

    drawLine
        .ignoresSafeArea()
        .scaleEffect(scale)
        .offset(offset)
        .rotationEffect(angle)
        .gesture(dragGesture)
        .gesture(rotationGesture)
        .simultaneousGesture(magnificationGesture)