独自の図形部品を作る方法を解説します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
カスタムShapeとは？
SwiftUIではPathとShapeの2つの微妙に異なるタイプの描画が可能です。
Pathは「ここから始めて、ここまで線を引いて、そこに円を追加する」といった一連の描画指示であり、すべて絶対座標を使用します。
対象的にShapeは、標準で用意された四角形や円形などの組み込み図形部品で、与えられたフレームの中に収まるように位置やサイズを調整して描画します。
カスタムShapeとは、PathとShapeプロトコルを組み合わせて作る独自の図形部品です。
Pathと組み込み図形（Shape）については、次の２つの記事で解説しています。
【SwiftUI】Pathを使った図形の描画
Pathビューを使った図形の描画方法について解説します。
capibara1969.com
2020.08.16
【SwiftUI】組み込み図形の描画
（2021/08/19 更新） SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。 これらの部品はShapeプロトコルに準じています。
capibara1969.com
2020.02.29
カスタムShapeの作成方法
作成手順は次の通りです。
１．Shapeプロトコルを採用した構造体を作成する。
２．次の形式のpathメソッドを実装する。
|
1 2 3 4 5 |
func path(in rect: CGRect) -> Path { // 描画指示 } |
引数rectには、図形を描画するフレームの位置とサイズがCGRect形式で渡ります。
戻り値には描画する図形を示すPathを返します。
作成例
以下は、カスタムShapeとして三角形を描画するTriangle()を作成した例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
struct ContentView: View { var body: some View { HStack(spacing: 50) { Triangle() .fill(Color.green) .frame(width: 200, height: 200) Triangle() .stroke(Color.pink, lineWidth: 10) .frame(width: 100, height: 200) } } } /// 三角形を描画するカスタムShape struct Triangle: 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.maxX, y: rect.maxY)) path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY)) path.closeSubpath() } } } |
Pathによる図形描画を理解していればカスタムShapeを作るのは簡単です。
引数として受領したフレームの位置とサイズ情報を利用して、目的の図形を描画します。
作成したカスタムShapeは、標準で用意されている組み込み図形部品と同様に使え、.fill()や.stroke()などのModifierが適用可能です。
あわせて読みたい記事
【SwiftUI】Pathを使った図形の描画
Pathビューを使った図形の描画方法について解説します。
capibara1969.com
2020.08.16
【SwiftUI】組み込み図形の描画
（2021/08/19 更新） SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。 これらの部品はShapeプロトコルに準じています。
capibara1969.com
2020.02.29
【SwiftUI】図形の輪郭描画（stroke）
（2020/8/22 更新） 図形の輪郭を描画する.stroke()の使い方を解説します。
capibara1969.com
2020.03.04
