SwiftUI 导出 Canvas 的内容答案

【问题标题】：SwiftUI exporting the content of CanvasSwiftUI 导出 Canvas 的内容
【发布时间】：2022-08-10 01:37:38
【问题描述】：

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

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

标签： image canvas swiftui export

【解决方案1】：

在画布上应用一个框架，它应该可以工作。例如。

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

【讨论】：

不可能这么简单。我正在尝试同样的事情，但它仍然为我生成了一个空图像

【解决方案2】：

答案在这里：Swift UI exporting content of canvas。在获取快照的行中应用框架，即

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

【讨论】：