How to adjust the size of shapes in order to fit the screen and align them to center? - swift

Question

In the app I am working on, I have used PocketSVG to read paths stored in .svg file the following way (init):
class ColoringImageViewModel: ObservableObject {
#Published var shapeItemsByKey = [UUID: ShapeItem]()
var shapeItemKeys: [UUID] = []
init(selectedImage: String) {
let svgURL = Bundle.main.url(forResource: selectedImage, withExtension: "svg")!
let _paths = SVGBezierPath.pathsFromSVG(at: svgURL)
for (index, path) in _paths.enumerated() {
let scaledBezier = ScaledBezier(bezierPath: path)
let shapeItem = ShapeItem(path: scaledBezier)
shapeItemsByKey[shapeItem.id] = shapeItem
shapeItemKeys.append(shapeItem.id)
}
}
}
struct ShapeItem: Identifiable {
let id = UUID()
var color: Color = Color.white
var path: ScaledBezier
init(path: ScaledBezier) {
self.path = path
}
}
After reading the paths, I transform them to shapes and place every shape as a ShapeView on ZStack:
struct ShapeView: View {
#Binding var shapeItem: ShapeItem?
var body: some View {
ZStack {
shapeItem!.path
.fill(shapeItem!.color)
shapeItem?.path.stroke(Color.black)
}
}
}
struct ColoringImageView: View {
...
var body: some View {
GeometryReader {
geometry in
ZStack {
ForEach(coloringImageViewModel.shapeItemKeys, id: \.self){ id in
ShapeView(shapeItem: $coloringImageViewModel.shapeItemsByKey[id])
}
}
.frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)
.background(Color.white)
.contentShape(Rectangle())
.edgesIgnoringSafeArea(.all)
}
}
...
}
On the screen, the paths are placed as shown below:
Instead, I would like to place an arbitrary vector image (split to paths) in the middle of the screen and scale it such that it fits the screen as shown below:
I would appreciate any suggestion to modify the code or implement the additional logic in order to fit the screen and align the image.
Edit
After replacing
.frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)
with
.frame(maxWidth: .infinity, maxHeight: .infinity)
the image is placed as shown below:
It seems like vertically the image is centered although I'm not sure as horizontally it doesn't seem to be centered. Also, I haven't found a solution to fit the image to screen (the example image doesn't fit the screen).

Answer 1

Instead of GeometryReader use the max frame for ZStack as follows
var body: some View {
ZStack {
Color.clear // this gives full screen ZStack
ForEach(coloringImageViewModel.shapeItemKeys, id: \.self){ id in
ShapeView(shapeItem: $coloringImageViewModel.shapeItemsByKey[id])
}
}
.background(Color.white)
.contentShape(Rectangle())
.edgesIgnoringSafeArea(.all)
}