'SwiftUI scale path when Image size change

in my project i'm drawing a box over a an image using a custom drawing gesture.

Image(uiImage: image!)
                    .resizable()
                    .scaledToFit()
                    .onTouch(type:.all ,limitToBounds: true, perform: updateLocation) //custom touch
                    .overlay(
                     ForEach(paths) { container in
                         // draw the bounding box
                         container.path
                             .stroke(Color.red, lineWidth: 4)
                    
                     }
                     
                    )


my issue is the following:

when my image change the dimension to fit the view I want to scale up, or down the bounding box I draw in order to keep the same proportion.

before change change image scale:

1

after image scale up:

2

as you can see on the second screenshot when image frame become bigger the path draw on it change location a dimension.

How can I solve this issue?

I tried with the following code when the picture frame dimension change:

.onPreferenceChange(ViewRectKey.self) { rects in
                
                pictureFrame = rects.first
                
                // temp to aplly scale
                guard let path = paths.last else {return}
                paths.removeAll()
                print("------------")
                let pa = path.path.applying(CGAffineTransform(scaleX: 5, y: 5)) // 5 just for testing, need to use correct scale factor
                
                let cont = PathContainer(id: UUID(), path: pa)
                paths.append(cont)
            }

but I don't know how to calculate how much the scale should be and second how to keep the position where initially I draw my path.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source