[MacOS]のSwiftUIで動的な図形描画

　ターゲットをMacOSとしたSwiftUIで動的な図形描画サンプルです。

やりたいこと

　SwiftUIを利用して、処理結果をグラフィカルに簡単に画面表示したい。

サンプルのイメージ

グラフ描画ボタンをクリックするとウインドウ上に折れ線グラフっぽいグラフが描かれます。

計算結果など可変データの図形描画サンプルが少なかったので、サンプル作成してみました。

サンプル作成の環境

　Swift 5.5.2, Xcode 13.2.1, M1 Mac

コードサンプル

細かい点はコード上のコメントを参照ください。

ContentView.swift

import SwiftUI

// 描画データの構造体
struct MyData {
    var x: CGFloat
    var y: CGFloat
}

struct ContentView: View {
    // 描画データの配列：「@State」定義の変数に変化があると画面は自動的に再描画される。
    @State var lineData: [MyData] = []

    var body: some View {
        VStack {
            // 描画先のコンテキスト
            Canvas { context, size in
                // 外部関数呼び出し、描画するパスがセットされる
                let myPath = drawLine(view: self)
                // myPathにセットされた情報で描画する
                context.stroke(myPath,
                               with        : .color(.orange),
                               lineWidth   : 2)
            }
            .frame(width: 400, height: 300)
            .border(Color.blue)
            .background(Color.white)

            // 描画するためのアクション
            Button("グラフ描画") {
                // 外部関数呼び出し
                addData(view: self)
            }
            .padding()
        }
    }
}

// 描画データセット：通常は計測データなどセット
func addData(view: ContentView) {
    // サンプルにランダムなデータを生成（説明略）
    view.lineData = []
    for n in 0 ... 10 {
        let x = CGFloat( n * 40 )
        let y = CGFloat.random(in: 50 ..< 250)
        let line = MyData(x: x,
                        y: y)
        view.lineData += [line]
    }
}

// データをパスとして描画
func drawLine(view: ContentView) -> Path {
    // 描画パス
    var myPath = Path()
    // 初期位置セット（キャンパスにペンを置く感じ）
    myPath.move(to: CGPoint(x: 0,
                            y: 0))
    // 配列にセットされたデータで描画
    for data in view.lineData {
        // データ毎にペンを移動させて描く
        myPath.addLine(to: CGPoint(x: data.x,
                                   y: data.y))
    }
    // 描画パスを返す
    return myPath
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

投稿について

　SwiftUIは経験数週間ですが、MacOS利用した記事が少ないので投稿してみました。間違いやもっと良い方法もあるかと思いますが、開発の参考になればと思います。

この方法は、Swiftでシミュレーションや計測などプログラミングした時の結果表示に使っています。