【SwiftUI】図形の塗りつぶし（fill）

（2022/04/02 更新）

図形を塗りつぶすfillモディファイアについて解説します。

環境
基本的な使い方
1. FillStyle構造体
2. 使用例
あわせて読みたい記事

環境

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

【Xcode】13.3
【Swift】5.6
【iOS】15.4
【macOS】Monterey バージョン 12.3

基本的な使い方

fill(ShapeStyle, style: FillStyle)

指定した色で図形を塗りつぶすモディファイアです。
Shapeプロトコルに準拠した図形（Shape、Path、Stroke等）に対してのみ使用できます。

【引数】
ShapeStyle（省略可）
塗りつぶす色を指定します。
ShapeStyleプロトコルに準拠した、Colorやグラデーション、画像が指定できます。
省略した場合は、標準色（Color.primary）が適用されます。

style（省略可）
塗りつぶしのレンダリング方法をFillStyle構造体で指定します。
省略した場合はデフォルトのFillStyle()が適用されます。

FillStyle構造体

FillStyle(eoFill: Bool, antialiased: Bool)

【引数】
eoFill（省略可）
形状をレンダリングする時に偶奇規則を使用するかどうかを示すブール値です。
trueの場合、図形の重なりが奇数枚の部分のみ塗りつぶされます。
省略した場合は、falseが適用されます。

antialiased（省略可）
形状のエッジにアンチエイリアスを適用するかどうかを示すブール値です。
省略した場合は、trueが適用されます。
※この値を変更した時の違いを確認する方法が見つけられませんでした。

使用例

struct ContentView: View {

/// グラデーションの定義

let gradient = LinearGradient(

gradient: Gradient(colors: [.pink, .purple]),

startPoint: .topLeading, endPoint: .bottomTrailing

)

var body: some View {

HStack(spacing: 50) {

/// 単色、偶奇規則使用しない

samplePath()

.fill(Color.pink, style: FillStyle(eoFill: false))

.frame(width:300, height: 275)

/// グラデーション、偶奇規則使用する

samplePath()

.fill(gradient, style: FillStyle(eoFill: true))

.frame(width:300, height: 275)

}

// サンプル図形

func samplePath() -> Path {

var path = Path()

path.addEllipse(in: CGRect(x: 50, y: 0, width: 200, height: 200))

path.addEllipse(in: CGRect(x: 0, y: 75, width: 200, height: 200))

path.addEllipse(in: CGRect(x: 100, y: 75, width: 200, height: 200))

return path

}

fillはShape用のModifierですので、View用のModifierであるframeよりも先に記述します。
順序を逆にすると、frameの戻り値がViewである為、エラー"Value of type 'some View' has no member 'fill'"が発生します。