A190cc68d612d6873b5d7c303bcceaab
SwiftUI 高级之 如何获取ScrollView内容的屏幕截图?

实战需求

SwiftUI:如何获取ScrollView内容的屏幕截图?
如何获取ScrollView内容的屏幕截

如何获取ScrollView内容的屏幕截

解决方案

在本教程中,我们将把ScrollView的内容转换为UIImage。
首先,我们将任何视图转换为UIImage,然后将扩展相同的逻辑以截屏整个Scroll视图内容。

  • 1、 在SwiftUI的视图上创建扩展,该扩展采用了我们需要转换为图像的部分视图的位置。我们将使用给定的框架创建一个虚拟的UIHostingViewController。从UIHostingView控制器,我们将访问UIKit的视图。
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.screenShot  
  }
}
  • 2、从UIKit的UIView获取图像:为此,我们将使用简单的核心图形API,如下所示:
extension UIView {   
   var screenShot: UIImage {        
       let rect = self.bounds    
       UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
       let context: CGContext = UIGraphicsGetCurrentContext()!        
       self.layer.render(in: context)       
       let capturedImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!        
       UIGraphicsEndImageContext()
       return capturedImage    
   }
}
  • 3、从SwiftUI视图触发图像:由于需要传递帧,因此需要在Geometry Reader中包装视图。
GeometryReader { proxy in           
   VStack {                
     Button(action: {                    
        let image = self.takeScreenshot(origin: proxy.frame(in: .global).origin, size: proxy.size)                    
         print(image) //save your image here               
      }) {
         RoundedRectangle(cornerRadius: 20)                    
          .fill(self.color)                   
          .overlay(                       
              VStack {                           
                 Text("size: \(proxy.size.debugDescription)")
                                .foregroundColor(.white)                
              })
       }            
    }       
 }.frame(height: 100)
  • 4、阅读滚动型的共同ñ帐篷架:我们将在滚动型的内容背景,并重复步骤3添加几何阅读器采取截图。
    我们将在单独的视图容器中构建ScrollView的内容,因为我们想在Content视图而不是其父视图上创建UIHostingView。

```
import SwiftUI

struct StackGeometryReader: View {
@Binding var takePic: Bool
@State private var contentHeight: CGFloat = 0

var body: some View {
    VStack {
        PrintableCells(color: Color.pink)
        PrintableCells(color: Color.red)
        PrintableCells(color: Color.green)
        PrintableCells(color: Color.pink)
        PrintableCells(color: Color.red)
        PrintableCells(color: Color.green)
        PrintableCells(color: Color.pink)
        PrintableCells(color: Color.red)
        PrintableCells(color: Color.green)
    }
    .padding()
    .background(
    ZStack {
        GeometryReader { proxy in
top Created with Sketch.