直感的に書けて良さそう。

開発環境

> xcodebuild -version
Xcode 12.3
Build version 12C33

直線

import SwiftUI

struct ContentView: View {
    var body: some View {
        Path { path in
            path.move(to: CGPoint(x: 0, y: 0))
            path.addLine(to: CGPoint(x: 200, y: 200))
        }
        .stroke()
        .fill(Color.blue)
        .frame(width: 200, height: 200)
    }
}


始点を(0, 0)に指定したのに左右にマージンが入ってしまう。
描画領域を画面全体にする場合は .infinity を使う。

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        Path { path in
            path.move(to: CGPoint(x: 0, y: 0))
            path.addLine(to: CGPoint(x: 200, y: 200))
        }
        .stroke()
        .fill(Color.blue)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

三角形

import SwiftUI

struct ContentView: View {
    var body: some View {
        Path { path in
            path.move(to: CGPoint(x: 0, y: 0))
            path.addLine(to: CGPoint(x: 200, y: 200))
            path.addLine(to: CGPoint(x: 0, y: 200))
        }
        .fill(Color.blue)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

scrapboxのピン留めページ

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Path { path in
                path.move(to: CGPoint(x: 0, y: 0))
                path.addLine(to: CGPoint(x: 300, y: 0))
                path.addLine(to: CGPoint(x: 300, y: 350))
                path.addLine(to: CGPoint(x: 0, y: 350))
            }
            .fill(Color.blue)
            
            Path { path in
                path.move(to: CGPoint(x: 0, y: 0))
                path.addLine(to: CGPoint(x: 300, y: 0))
                path.addLine(to: CGPoint(x: 300, y: 30))
                path.addLine(to: CGPoint(x: 0, y: 30))
            }
            .fill(Color.red)
            
            Path { path in
                path.move(to: CGPoint(x: 240, y: 0))
                path.addLine(to: CGPoint(x: 300, y: 60))
                path.addLine(to: CGPoint(x: 240, y: 60))
            }
            .fill(Color.green)
            
            Path { path in
                path.move(to: CGPoint(x: 240, y: 0))
                path.addLine(to: CGPoint(x: 300, y: 0))
                path.addLine(to: CGPoint(x: 300, y: 60))
            }
            .fill(Color.white) // 無理やり感
        }
    }
}

ZStack使えばある程度は書けそう。