【SwiftUI】Pathを使った図形の描画

Pathビューを使った図形の描画方法について解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

基本的な使い方

クロージャー内で受け取った引数path(空のPathビュー)に描画メソッドを追加して、2次元のアウトライン形状の図形を作成します。

使用例1

Pathビューのクロージャー内で三角形のアウトラインを描画を定義し、.fill()モディファイアで図形の塗りつぶし色を指定します。

Pathの基本的な使い方

.fill()モディファイアの前に、.stroke()モディファイアを指定すると、枠線のみの描画になります。

枠線のみの描画

.storoke()と.fill()を省略した場合は、次のように黒(Color.primary)で塗りつぶされた図形が描画されます。
これは.fill(引数なし)が指定された場合と同じ動作です。

Modifier省略時のPath

使用例2

出力結果は使用例1と同じですが、次のような表記も可能です。

一旦空のPathをプロパティに代入し、そこに描画メソッドを追加する手法です。
複雑な描画指示を記述する場合は、こちらの書き方の方が使い勝手が良いかもしれません。

以降の章で、Pathビューで使える基本メソッドを紹介します。

スポンサーリンク

move

パスの始点をCGPoint構造体で指定します。

使用例

途中でパスの始点を移動して、2本の線を追加する例です。

moveメソッドの例

スポンサーリンク

addLine

現在の位置から引数(to)で指定した位置までの直線を追加します。
続けて使用すると連続線となります。

使用例

線の組み合わせで3角形を描画する例です。

頂点の角だけ他と形状が異なるのは、この部分が連続線になっていない為です。
連続線にするには後に示すcloseSubpathメソッドを使用します。

addLineメソッドの例

スポンサーリンク

closeSubpath

パスの現在位置から開始点に直線を追加し、現在のパスを閉じます。

使用例

三角形の描画で、最後の直線にcloseSubpath()を使用した例です。
全てaddLineで描画した場合と違い、最初と最後の線が連続線になります。

closeSubpathメソッドの例

スポンサーリンク

addLines

連続した直線をパスに追加します。
各直線の両端位置はCGPoint構造体の配列で指定します。
addLines()を使用した場合、最初のポイントが開始位置になりますので、moveメソッドで開始位置を指定する必要がありません。

使用例

addLinesメソッドの例

スポンサーリンク

AddArc

円周の一部分である円弧をパスに追加します。

center
円弧の中心
CGPoint構造体で指定します

radius
円弧の半径
CGFloat型で指定します

startAngle、endAngle
円弧の開始角度と終了角度
Angle構造体で指定します

clockwise
回転方向をtrue/falseで指定します
true:時計と反対回り
false:時計回り

transform(省略可能)
図形変換情報(アフィン変換行列)
CGAffineTransformt構造体で指定します

使用例

円弧と中心線をつなげて扇形を描画した例です。

addArcメソッドの例

スポンサーリンク

addRect、addRects

矩形(長方形)をパスに追加します。
矩形はCGRect構造体で指定します。

transformは図形変換情報(アフィン変換行列)をCGAffineTransformt構造体で指定します。
こちらは省略可能です。

こちらは複数の矩形をまとめてパスに追加するメソッドです。

使用例

addRectsの例

スポンサーリンク

addEllipse

楕円形をパスに追加します。
CGRect構造体で指定した矩形にぴったり収まる楕円形を描画します。

transformは図形変換情報(アフィン変換行列)をCGAffineTransformt構造体で指定します。
こちらは省略可能です。

次のイニシャライザを使うと、はじめから楕円形を追加したPathを生成する事ができます。

使用例

または、

addEllipseの例

スポンサーリンク

addRoundedRect

角丸四角形をパスに追加します。
CGRect構造体で指定した矩形にぴったり収まる角丸四角形を描画します。
角丸のサイズはCGSize構造体で指定します。

transformは図形変換情報(アフィン変換行列)をCGAffineTransformt構造体で指定します。
こちらは省略可能です。

次のイニシャライザを使うと、はじめから角丸四角形を追加したPathを生成する事ができます。

使用例

または、

または、

addRoundedRectの使用例

スポンサーリンク

その他

Pathビューには、ここに紹介した以外にもいろいろな描画用メソッドが用意されています。
もっと詳しく知りたい方は、Swiftのリファレンスを参照してみて下さい。

Path | Apple Developer Documentation
The outline of a 2D shape.
スポンサーリンク

あわせて読みたい記事

【SwiftUI】カスタムShapeの作り方
独自の図形部品を作る方法を解説します。
【SwiftUI】組み込み図形の描画
(2021/08/19 更新) SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。 これらの部品はShapeプロトコルに準じています。
【SwiftUI】図形の輪郭描画(stroke)
(2020/8/22 更新) 図形の輪郭を描画する.stroke()の使い方を解説します。