SwiftUI 导出 Z6EA5359E01A418428884943125518289BZ 的内容

Question

有谁知道如何将 Canvas 的内容导出到图像中？

使用 SwiftUI，可以从带有扩展名的视图生成图像

   func snapshot() -> UIImage {
        let controller = UIHostingController(rootView: self)
        let view = controller.view

        let targetSize = controller.view.intrinsicContentSize
        view?.bounds = CGRect(origin: .zero, size: targetSize)
        view?.backgroundColor = .clear

        let renderer = UIGraphicsImageRenderer(size: targetSize)
        
        return renderer.image { _ in
            view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
    }

这对于像 Button 这样的简单视图非常有效，但对于 Canvas，它总是会生成一个空图像。

比如下面的代码，按钮生成的图片没问题，但是Canvas的那个总是空的。

import SwiftUI

extension View {
    func snapshot() -> UIImage {
        let controller = UIHostingController(rootView: self)
        let view = controller.view
        
        let targetSize = controller.view.intrinsicContentSize
        view?.bounds = CGRect(origin: .zero, size: targetSize)
        view?.backgroundColor = .clear
        
        let renderer = UIGraphicsImageRenderer(size: targetSize)
        
        return renderer.image { _ in
            view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
    }
}

struct ContentView: View {
    var textView: some View {
        Text("Hello, SwiftUI")
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .clipShape(Capsule())
        
    }
    var canvas: some View {
        Canvas { context, size in
            var path = Path()
            path.move(to: CGPoint(x: 0, y:0))
            path.addLine(to: CGPoint(x: size.width/2, y:0))
            path.addLine(to: CGPoint(x: size.width/2, y:size.height/2))
            path.addLine(to: CGPoint(x: 0, y:size.height/2))
            path.closeSubpath()
            
            context.fill(path, with: .color(.blue))
            
        }
    }
    
    var body: some View {
        VStack {
            textView
            canvas
            
            Button("Save to image: Canvas") {
                if let view = canvas as? Canvas<EmptyView> {
                    let image = view.snapshot()
                    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
                }
            }
            Button("Save to image: Text") {
                if let view = textView as? Text {
                    let image = view.snapshot()
                    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
                }
            }
        }
    }
}

Answer 1

将框架应用于 canvas，它应该可以工作。 例如

canvas.frame(width: 300, height: 300)

Answer 2

答案在这里： Swift UI 导出 canvas 的内容。 在获取快照的行中应用框架，即

let newImage = canvasView.frame(width: 300, height: 300).snapshot()