问如何调整形状的大小以适应屏幕并使其居中对齐？
EN

Stack Overflow用户

提问于 2020-08-06 20:12:07

回答 1查看 57关注 0票数 0

在我正在开发的应用程序中，我使用PocketSVG以以下方式读取存储在.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)

图片的位置如下：

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

swiftui

swift

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-07 05:43:18

使用ZStack的最大帧代替GeometryReader，如下所示

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