swiftswiftui

How can I make a gesture work on a path when only part of the path is inside the view?


In the code below, I am reading a predefined path and converting the axis system from SwiftUI to a mathematical axis. So far, so good. The issue arises when I add a drag gesture to this path. The gesture only works on specific parts of the shape, as shown in the photo, and does not work on the rest of the path. How can I solve this issue without altering the predefined path?

import SwiftUI

struct ContentView: View {
    
    @State private var pathCurrentOffset: CGSize = CGSize()
    @State private var pathLastOffset: CGSize = CGSize()
    
    var body: some View {
        
        GeometryReader { geometryValue in
            
            Color.white
            
            myCustomPathTest
                .scale(x: 1.0, y: -1.0)
                .stroke(Color.black, lineWidth: 5.0)
                .offset(x: pathCurrentOffset.width + geometryValue.size.width/2.0,
                        y: -pathCurrentOffset.height - geometryValue.size.height/2.0)
                .gesture(pathDragGesture)

        }
        .padding()
    }
    
    private var pathDragGesture: some Gesture {
        
        return DragGesture(minimumDistance: 0.0, coordinateSpace: .local)
            .onChanged() { gestureValue in
                
                pathCurrentOffset = CGSize(width: gestureValue.translation.width + pathLastOffset.width,
                                           height: -gestureValue.translation.height + pathLastOffset.height)
            }
            .onEnded() { gestureValue in
                pathLastOffset = pathCurrentOffset

            }
        
    }
}

let myCustomPathTest: Path = {
    return Path { path in
        path.move(to: .zero)
        path.addLine(to: CGPoint(x: 50.0, y: 50.0))
        path.addEllipse(in: CGRect(origin: CGPoint(x: -50.0, y: -50.0), size: CGSize(width: 100.0, height: 100.0)))
    }
}()

Working part on path is:

enter image description here


Solution

  • I think the main issue is that the path is partially outside the content frame.

    One way to solve would be to offset the path before stroking it. This is not quite leaving it unaltered, as you wanted, but it might be acceptable anyway:

    GeometryReader { geometryValue in
        myCustomPathTest
            .offsetBy(dx: geometryValue.size.width/2.0, dy: geometryValue.size.height/2.0)
            .scale(x: 1.0, y: -1.0)
            .stroke(Color.black, lineWidth: 5.0)
            .offset(x: pathCurrentOffset.width, y: -pathCurrentOffset.height)
            .gesture(pathDragGesture)
    
    }
    .background(.white)
    .padding()
    

    Instead of using a GeometryReader, you could also use a Shape as a wrapper for the path:

    struct ShapeForPath: Shape {
        let customPath: Path
        func path(in rect: CGRect) -> Path {
            customPath
                .offsetBy(dx: rect.size.width / 2, dy: rect.size.height / 2)
        }
    }
    

    Doing it this way, the body of your example now simplifies to the following:

    var body: some View {
        ShapeForPath(customPath: myCustomPathTest)
            .scale(x: 1.0, y: -1.0)
            .stroke(Color.black, lineWidth: 5.0)
            .offset(x: pathCurrentOffset.width, y: -pathCurrentOffset.height)
            .gesture(pathDragGesture)
            .background(.white)
            .padding()
    }