【SwiftUI】オリジナル図形の追加方法

こんにちはコーヤです。

このページでは、SwiftUIで使用できる図形にオリジナルの図形を加える方法をご紹介します。

以下のバージョンで動作確認しています。

  • Xcode 13.4.1
  • Swift 5.6.1

図形の追加方法

SwiftUIに用意されていない図形(例えば三角形や星型など)はパスを利用した関数で描画のコードを書いておけば、用意されている図形と同じように使えるようになります。

パスを利用した関数は以下の形式です。引数はCGRectで、戻り値はPathです。

func path(in rect: CGRect) -> Path {
}
struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            Hexagon()
                .fill(Color.blue)
                .frame(width: 200, height: 200)
            Spacer()
            Hexagon()
                .stroke(Color.blue, lineWidth: 5)
                .frame(width: 200, height: 200)
            Spacer()
        }
    }
}

struct Hexagon: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.minX, y: (rect.minY + rect.midY) / 2))
            path.addLine(to: CGPoint(x: rect.minX, y: (rect.maxY + rect.midY) / 2))
            path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
            path.addLine(to: CGPoint(x: rect.maxX, y: (rect.maxY + rect.midY) / 2))
            path.addLine(to: CGPoint(x: rect.maxX, y: (rect.minY + rect.midY) / 2))
            path.closeSubpath()
        }
    }
}

以上です。ご参考になれば幸いです。

コメント欄