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