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:

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:

• swift
• swiftui

Share Improve this question Follow edited Nov 20, 2024 at 14:56 swiftPunk asked Nov 20, 2024 at 14:49 swiftPunkswiftPunk 1

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

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()
}

Try extending your button's frame and/or using .contentShape(Rectangle())

You might need to compute the bounding rectangle of your path and use that for your frame.