【SwiftUI】俺はただViewをPNGで書き出しただけなんだ

MacOSでViewをPNGで書き出しただけ。

結構大変だったのでここに足跡を残しておこうと思う。試行錯誤もあったけれど、今はただ疲れたので完成したコードだけ載せておく。いろんなサイト様を参考にしたので、少し寝たら参考リンクを貼ろうと思う。

以下コード

//
//  CanvasView.swift
//  FolderCustomizer
//
//  Created by coiai on 2023/12/15.
//

import SwiftUI

struct CanvasView: View {
    @State private var inputText = ""
    @State private var presented = true
    @State private var folderColor: FolderColorPicker.FolderColor = .Blue
    
    var body: some View {
        VStack {
            CanvasToSave(inputText: $inputText, folderColor: $folderColor)
        }
        .inspector(isPresented: $presented) {
            Button("Save Image") {
               
            }

            Form {
                Section("Text") {
                    TextField("Text", text: $inputText)
                        .font(.body)
                        .padding()
                }
                Section("Folder Color") {
                    FolderColorPicker(folderColor: $folderColor)
                }
            }
            .inspectorColumnWidth(min: 200, ideal: 300, max: 400)
            .toolbar {
                Spacer()
                Button {
                    presented.toggle()
                } label: {
                    Label("toggle inspector", systemImage: "info.circle")
                }
            }
            Spacer()
        }
    }
}

struct CanvasToSave: View {
    @Binding var inputText: String
    @Binding var folderColor: FolderColorPicker.FolderColor
    
    var body: some View {
        Canvas { context, size in
            let rect = CGRect(origin: .zero, size: size).insetBy(dx: 5, dy: 5)
            // キャンバスの中心の点
            let midPoint = CGPoint(x: size.width / 2, y: size.height / 2)
            
            
            let text = Text(inputText)
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(.white)
            
            context.draw(text, at: midPoint, anchor: .center)
            context.blendMode = GraphicsContext.BlendMode.softLight
            
            let image = Image(folderColor.rawValue)
            context.draw(image, in: rect.insetBy(dx: 0, dy: 0))
        } symbols: {
            RotateObjView()
                .tag(0)
        }
        .frame(width: 512, height: 512)
    }
}

#Preview {
    CanvasView()
}