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

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

環境

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

【Xcode】11.7
【Swift】5.2.4
【iOS】13.7
【macOS】Catalina バージョン 10.15.6

fill(塗りつぶし色, style: FillStyle構造体)

Shapeプロトコルに準拠した図形（Shape、Path、Stroke等）を指定した色で塗りつぶします。

塗りつぶし色にはColorまたはグラデーションが指定可能です。
省略した場合は、Color.primaryが適用されます。

引数styleには、塗りつぶしのレンダリング方法を決定するスタイルをFillStyle構造体で指定します。
省略した場合はFillStyle(eoFill: false, antialiased: true)が適用されます。

FillStyle(eoFill: Bool, antialised: Bool)

eoFill
形状をレンダリングするときに偶奇規則を使用するかどうかを示すブール値です。デフォルト値はfalse。
trueの場合、図形の重なりが奇数枚の部分のみ塗りつぶされます。

antialised
形状のエッジにアンチエイリアスを適用するかどうかを示すブール値。デフォルト値は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'」というエラーが発生します。