SwiftUI, apply drawGesture only when over Image

I'm try to apply the gesture only when the user is over the Image display not when tapped outside the image.

Any suggestion how I can do? this following code draw also when user tap outside the image.

struct ContentView: View {
    @StateObject var am = AppManager()
    @State var switchToTakePicture = false
    @State var paths: [PathContainer] = []
    @State var currentDraggingId = UUID()
    @State var spikoPic = #imageLiteral(resourceName: "spiko-16.jpeg")
    @State var centerOFimage = CGSize(width: 0, height: 0)
    var body: some View {
        
        GeometryReader { proxy in
            ZStack {
                Image(uiImage: spikoPic)
                    .resizable()
                    .scaledToFit()
                    .position(x: proxy.size.width/2, y: proxy.size.height/2)
                    .background(GeometryReader {
                        Color.clear.preference(key: ViewRectKey.self,
                                               value: [$0.frame(in: .global)])
                    })
                    .gesture(drawGesture) // not correct
                
                ForEach(paths) { container in
                    // draw and set the foreground color of the paths to red
                    container.path
                        .stroke(Color.red, lineWidth: 4)
                    
                    
                }
            }
            .onPreferenceChange(ViewRectKey.self) { rects in
                print(rects.first ?? .zero)
                
            }
        }
        
    }
    var drawGesture: some Gesture {
        
        DragGesture(minimumDistance: 0)
            .onChanged { value in
                
                // The point that the gesture started from
                let start = value.startLocation
                // The point that the gesture ended to
                let end = value.location
                // the properties of the rectangle to be drawn
                let rectangle: CGRect = .init(origin: end,
                                              size: .init(width: start.x - end.x,
                                                          height: start.y - end.y))
                // create a path for the rectangle
                let path: Path = .init { path in
                    
                    path.addRect(rectangle)
                }
                
                print("rettangolo = \(rectangle) orig \(rectangle.origin) - height \(rectangle.height) width = \(rectangle.width)")
                
                // remove the previous rectangle that was drawen in current
                // process of drawing
                paths.removeAll { $0.id == currentDraggingId }
                // append the new rectangle
                paths.append(.init(id: currentDraggingId, path: path))
            }
            .onEnded { _ in
                // renew the dragging id so the app know that the next
                // drag gesture is drawing a completely new rectangle,
                // and is not continuing the drawing of the last rectangle
                currentDraggingId = .init()
            }
    }
}


i want no box outside

enter image description here

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum