时间戳

首页 > 解决方案 > 如何调整形状的大小以适合屏幕并将它们对齐到中心？

swift - 如何调整形状的大小以适合屏幕并将它们对齐到中心？

问题描述

在我正在开发的应用程序中，我使用 PocketSVG 通过以下方式（init）读取存储在 .svg 文件中的路径：

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

阅读路径后，我将它们转换为形状并将每个形状作为 ShapeView 放置在 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)
            }
            
        }
...
}

在屏幕上，路径如下所示：

在此处输入图像描述

相反，我想在屏幕中间放置一个任意矢量图像（分割为路径）并对其进行缩放，使其适合屏幕，如下所示：

在此处输入图像描述

我将不胜感激任何修改代码或实现附加逻辑以适应屏幕并对齐图像的建议。

编辑

更换后

.frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)

和

.frame(maxWidth: .infinity, maxHeight: .infinity)

图像放置如下所示：

在此处输入图像描述

看起来图像垂直居中，虽然我不确定水平它似乎没有居中。另外，我还没有找到使图像适合屏幕的解决方案（示例图像不适合屏幕）。

标签： swiftswiftui

解决方案

而不是GeometryReader使用最大帧ZStack如下

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

推荐阅读