【SwiftUI】図形の輪郭描画(stroke)

(2020/8/22 更新)

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

スポンサーリンク

環境

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

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

基本的な使い方

.stroke()はShapeプロトコルに準じた図形やPathビューの輪郭を描画します。

引数(lineWidth)で線の太さを指定します。
デフォルト値として1が設定されている為、省略可能です。
線の色には、Colorグラデーションの他に画像も指定可能です。

使用例

円の輪郭描画

スポンサーリンク

線のスタイルを指定する

次のイニシャライザを使って線のスタイルを指定できます。

線のスタイルはStrokeStyle構造体で定義します。

StrokeStyle構造体

StrokeStyle構造体のイニシャライザは次の通りです。
全ての引数はデフォルト値が設定されているので、省略可能。
必要な引数のみ指定します。

引数 説明 デフォルト値
lineWidth 線の太さ 1
lineCap 線の端の形状 .butt
lineJoin 線の接続部の形状 .miter
miterLimit 接続部の形状に.miterの適用を決めるしきい値 10
dash 破線の形状を配列で指定 [CGFloat]()
dashPhase 破線の開始位置 0

破線の描画(dash、dashPhase)

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

引数dashPhaseには、パターン配列の何番目から開始するか指定します。
デフォルト値は0です。

使用例

破線の描画

線の端の形状指定(lineCap)

線の端の形状をCGLineCap列挙型で指定します。
指定できる列挙子は次のいずれかです。

.butt
なにもしません。端がそのまま切り取られるイメージ。
これがデフォルトです。

.square
パスの終点を越えて線を線幅の半分の距離だけ四角く延長します。
四角く延長するので、曲線で使うと少し不自然になります。
フレームの端で使うと延長した分はみ出します。

.round
端を丸くします。
パスの終点を超えて延びるように線を描画します。
線は終点を中心に、線の幅の1/2の半径を持つ半円弧で終わります。
フレームの端で使うと丸めた分はみ出します。

使用例

先端の形状指定

破線にした場合は、次のように個々の破線の先端形状に適用されます。

破線に適用したlineCap

接続部の形状指定(lineJoin)

線の接続部の形状をCGLineJoin列挙型で指定します。
指定できる列挙子は次のいずれかです。

.miter
鋭い(角度のついた)角を持つ接続。
パスの終点を越えた線の外側の辺を、それらが出会うまで描きます。

.round
端が丸くなっている接続

.beval
端が斜面に切り取られた接続

.miterの適用を決めるしきい値です。
パスの終点を超えた線の長さを線幅で割った結果が、しきい値よりも大きい場合は、.bevalが採用されます。
デフォルト値は10。

使用例

接続部の形状指定

スポンサーリンク

フレームサイズとの関係

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

フレームサイズとの関係

フレームにぴったりと収めたい場合は、.stroke()モディファイアの代わりに.strokeBorder()モディファイアを使用します。
線の太さを考慮してShape部品のサイズを縮小してくれます。(動作としては縦横をlineWidth/2だけ縮小したShape部品を返します)
なお、カスタムShape部品に対して使用した場合の動作は、該当部品に実装によります。

.strokeBorder()使い方は.storoke()モディファイアと基本的に同じですが、後ろに.fill()モディファイアが使えなくなるなど、若干の相違点があります。

フレームサイズに合わせる

スポンサーリンク

あわせて読みたい記事

【SwiftUI】組み込み図形の描画
SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。これらの部品はShapeプロトコルに準じています。
【SwiftUI】Pathを使った図形の描画
Pathビューを使った図形の描画方法について解説します。
【SwiftUI】Viewのフレームサイズ指定(frame)
Viewのフレームサイズを指定する方法を解説します。フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定さ...
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信