【SwiftUI】図形のパス(線)描画(stroke)

図形のパス(線)を描画する.stroke()の使い方を解説します。

スポンサーリンク

環境

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

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

基本的な使い方

.stroke()はShapeプロトコルに準じた図形Viewに対して使うModifierで、対象図形のパスを描画します。
例えば、円形部品であるCircle()に対して使うと、円の輪郭のみが描画されます。

第一引数で線の色、第二引数(lineWidth)で線の太さを指定します。
線の色を省略した場合はデフォルト色(Color.primary)、太さを省略した場合は1が適用されます。

使用例

円の輪郭描画

フレームサイズとの関係

.frame()で指定したフレームサイズはあくまで元のShape部品に適用されるので、デフォルトの太さ(1)より太い線はフレームサイズをはみ出ます。
レイアウト調整の際には注意が必要です。

フレームサイズとの関係

パスを破線で描画する

次のイニシャライザを使用すると、パスを破線で描画可能です。

StrokeStyle構造体の引数dashに破線の形状を次のようなパターン配列で指定します。

使用例

パスを破線で描画

あわせて読みたい記事

【SwiftUI】組み込み図形の描画
SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。これらの部品はShapeプロトコルに準じています。
【SwiftUI】Viewのフレームサイズ指定
Viewのフレームサイズを指定する方法を解説します。フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定さ...
【SwiftUI】Modifierの適用順
Viewに様々な変更を適用するModifierですが、適用する順番によって挙動が変わる事があります。これはModifierが既存のViewのプロパティを変更しているのでは無く、変更を適用した新しいViewを毎回作成している事に関係します。...
SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント