GeometryReader 和 ZStack 到产品截图

Question

我的目标：使用几何 reader 和屏幕截图功能（已编写）仅抓取图像中位于关闭按钮后面的一小部分。

设置：我有一个 ZStack，上面有一个 Image 和一个较小的按钮（它是这个例子的系统图像）。目前，我将关闭按钮与背景图片的顶部对齐，乍一看一切都很好。

但是，当点击关闭按钮时，我需要抓取关闭按钮本身的屏幕截图（匹配的框架和大小）。

当我的 ZStack 有一个 .center 对齐时一切正常，但现在我已经设置 alignment: .top，我的屏幕截图仍然出现在图像的中心。

如何移动包含关闭按钮的 GeometryReader 以允许屏幕截图包含关闭按钮（以及它后面的一些额外背景）？

我的代码：

struct ImageView: View {
    var body: some View {
        ZStack(alignment: .top) {
            Image("ZoomedBuzz")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: UIScreen.main.bounds.width)
                
            GeometryReader { geo in
                Image(systemName: "xmark.circle.fill")
                    .font(.system(size: 80))
                    .border(Color.blue)
                    .onTapGesture {
                        let globalImage = takeScreenshot(origin: geo.frame(in: .global).origin,
                                                         size: geo.size)
                        print(globalImage)
                    }
            }
            .frame(width: 80, height: 80, alignment: .top)
        }
    }
}

截图：

extension UIView {
    var renderedImage: UIImage {
        // rect of capture
        let rect = self.bounds
        // create the context of bitmap
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        let context: CGContext = UIGraphicsGetCurrentContext()!
        self.layer.render(in: context)
        // get a image from current context bitmap
        let capturedImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return capturedImage
    }
}

extension View {
    func takeScreenshot(origin: CGPoint, size: CGSize) -> UIImage {
        let window = UIWindow(frame: CGRect(origin: origin, size: size))
        let hosting = UIHostingController(rootView: self)
        hosting.view.frame = window.frame
        window.addSubview(hosting.view)
        window.makeKeyAndVisible()
        return hosting.view.renderedImage
    }
}

期望的结果（但取自 ZStack 的顶部）：

当前结果（在以 ZStack 为中心的背景图片中间截图）：

Answer 1

如果您希望 GeometryReader 靠近按钮而不是捕获整个屏幕，您可以将其设置为按钮背景。

很遗憾，我不知道您的屏幕截图方法是如何工作的，因此我无法验证它是否适用于您的设置，但现在您可以简单地截取整个 GeometryReader 的框架。

struct ImageView: View {
    
    @State private var geo: GeometryProxy!
    
    var body: some View {
        ZStack(alignment: .top) {
            Image("ZoomedBuzz")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: UIScreen.main.bounds.width)
                
            Image(systemName: "xmark.circle.fill")
                .font(.system(size: 80))
                .border(Color.blue)
                .background(rectReader())
                .onTapGesture {
                    let globalImage = takeScreenshot(origin: geo.frame(in: .global).origin,
                                                     size: geo.size)
                    print(globalImage)
                }
        }
    }
    
    private func rectReader() -> some View {
        return GeometryReader { geometry -> AnyView in
            DispatchQueue.main.async {
                self.geo = geometry
            }
            return AnyView(Rectangle().fill(Color.clear))
        }
    }
}

GeometryReader 和 ZStack 到产品截图

GeometryReader and ZStack to product screenshot

swiftui

geometryreader

zstack