如何使用 SwiftUI 将图像切成 2答案

【问题标题】：How to cut an image into 2 using SwiftUI如何使用 SwiftUI 将图像切成 2
【发布时间】：2021-07-09 23:46:48
【问题描述】：

我有这样的图片

我想使用 SwiftUI 将它分成 2 部分。留下我可以访问的 2 个单独的图像。但是我不知道如何将原件分成顶部和底部。这两个部分必须对齐才能创建原始图像。

顶部图片：

底部图片：

我尝试使用几何阅读器读取高度和宽度并返回一半高度的图像，但这两个图像不喜欢这样。

GeometryReader { geo in
    image
       .frame(width: geo.width, height: geo.height / 2, alignment: .center)
       .clipped()
}

【问题讨论】：

您想在视觉上（即仅在屏幕上）还是物理上（即在两个分开的半高图像上）分割它？
@Asperi 物理上，所以我有 2 个单独的图像，我可以稍后将它们重新组合在一起（我知道很奇怪）。

标签： image swiftui uiimage crop geometryreader

【解决方案1】：

这里有一种方法：使用 clipped() 修饰符。

struct ContentView: View {
    
    @State private var spacing: CGFloat = CGFloat()
    @State private var imageSize: CGSize = CGSize()
    
    var body: some View {
        
        let image = Image(systemName: "star")
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200, alignment: .center)
            .background(Color.yellow)
            .cornerRadius(10.0)
            .background(GeometryReader { proxy in Color.clear.onAppear() { imageSize = proxy.size } })
        
        
        return ZStack {
            
            VStack(spacing: spacing) {
                
                image.frame(width: imageSize.width, height: imageSize.height/2, alignment: .top).clipped()
                
                image.frame(width: imageSize.width, height: imageSize.height/2, alignment: .bottom).clipped()
            }
            
            VStack { Spacer(); Slider(value: $spacing,in: 0.0...100.0) }
            
        }
        .padding()
        .compositingGroup()
        .shadow(radius: 10.0)
        
    }
}

【讨论】：