SwiftUIで図形を描くときに欠かせないのが Path です。
シンプルな四角形や円だけでなく、自由な線やカスタム図形を描きたいときに活躍します。
この記事では、Pathの基本的な意味や使い方、よく使うメソッド、活用時の注意点までわかりやすく解説します。
Pathとは？
Pathは、SwiftUIで「線や図形を描くための設計図」を表す構造体です。
直線・曲線・閉じた図形などを「座標を指定して組み立てていく」イメージで扱います。
例えば「ここからここまで線を引く」「四角形を作る」「曲線を描く」といった命令をPathに書き込むことで、画面上に自由な図形をレンダリングできます。
CanvasやViewの背景として描画する場合や、カスタム図形を作りたいときに非常に便利です。
UIKitで言えば UIBezierPath に近い存在ですが、SwiftUIらしく宣言的に書けるのが特徴です。
具体例：直線を描く
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import SwiftUI struct ContentView: View { var body: some View { Path { path in path.move(to: CGPoint(x: 50, y: 50)) // 開始点 path.addLine(to: CGPoint(x: 200, y: 200)) // 終了点まで直線を引く } .stroke(.blue, lineWidth: 3) // 線の色と太さ } } |
ポイントは move(to:) で「ペンを置く位置」を決め、addLine(to:) で「その場所まで線を引く」という流れです。
そして最後に .stroke() を指定すると、そのPathを線として描画してくれます。
具体例：三角形を描く
次は、Pathで三角形を描いてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import SwiftUI struct ContentView: View { var body: some View { Path { path in path.move(to: CGPoint(x: 100, y: 50)) // 頂点 path.addLine(to: CGPoint(x: 50, y: 150)) // 左下 path.addLine(to: CGPoint(x: 150, y: 150)) // 右下 path.closeSubpath() // 始点と終点を結んで閉じる } .fill(.orange) // 塗りつぶし } } |
これでオレンジ色の三角形が描かれます。
線だけでなく .fill() を使えば内部を塗りつぶせる点も重要です。
主要メソッドとその意味
Pathを扱う上でよく登場するメソッドを整理しておきましょう。
| メソッド | 説明 |
|---|---|
move(to:) |
描画の開始位置を移動（ペンを置くイメージ） |
addLine(to:) |
指定した座標まで直線を引く |
addQuadCurve(to:control:) |
制御点を指定して二次ベジェ曲線を描く |
addCurve(to:control1:control2:) |
制御点2つを指定して三次ベジェ曲線を描く |
addArc(center:radius:startAngle:endAngle:clockwise:) |
円弧を描く |
closeSubpath() |
始点と終点を結んで図形を閉じる |
これらを組み合わせることで、直線・曲線・複雑な図形を自由に描けます。
特に addQuadCurve や addCurve を使うと、柔らかい曲線を持つカスタム図形が作れるのが魅力です。
Pathの活用シーン
Pathは次のような場面でよく使われます。
- アプリ内でカスタム図形を描きたい時
（例：ハート、波線、チャートなど） - 標準の
RectangleやCircleでは表現できない独自UIを作る時 - 図形アニメーションを実装したい時（
trimやstrokeと組み合わせる） - 背景デザインとして自由な形を描きたい時
アニメーションと組み合わせれば「手書きのように線が描かれていくUI」も簡単に作れます。
Pathを使うときの注意点
便利なPathですが、使う際にはいくつかの注意点があります。
- 座標系はローカル座標
Path内で指定する座標は、そのPathを配置したViewの中での座標です。
(0,0) は左上を意味するので、意図した位置に描くためには調整が必要です。 - 描画性能に注意
複雑すぎるPathを多用するとパフォーマンスに影響する場合があります。
特にアニメーションと組み合わせるときは注意しましょう。 - 塗りと線は別扱い
.stroke()と.fill()は別処理なので、必要に応じて両方を重ねて使うことも可能です。 - レスポンシブな設計にはGeometryReaderが有効
固定座標だと画面サイズによって崩れやすいので、GeometryReaderを使ってViewのサイズに応じた相対的なPathを作ると実践的です。
まとめ
今回は SwiftUIの Path について詳しく解説しました。
- Pathは自由な線や図形を描くための設計図
move(to:)、addLine(to:)、addCurveなどで線や曲線を描画.stroke()で線、.fill()で塗りつぶしを実現- カスタム図形、アニメーション、背景デザインなど幅広く活用可能
- 座標系やパフォーマンス、画面サイズ対応に注意することが大切
SwiftUIでオリジナルの図形やデザインを表現したいときには、まずPathを試してみましょう！
