図形を塗りつぶすfillモディファイアについて解説します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.7
【Swift】5.2.4
【iOS】13.7
【macOS】Catalina バージョン 10.15.6
【Swift】5.2.4
【iOS】13.7
【macOS】Catalina バージョン 10.15.6
基本的な使い方
1 2 3 |
fill(塗りつぶし色, style: FillStyle構造体) |
Shapeプロトコルに準拠した図形(Shape、Path、Stroke等)を指定した色で塗りつぶします。
塗りつぶし色にはColorやグラデーションの他に画像も指定可能です。
省略した場合は、Color.primaryが適用されます。
引数styleには、塗りつぶしのレンダリング方法を決定するスタイルをFillStyle構造体で指定します。
省略した場合はFillStyle(eoFill: false, antialiased: true)が適用されます。
FillStyle構造体
1 2 3 |
FillStyle(eoFill: Bool, antialised: Bool) |
eoFill
形状をレンダリングするときに偶奇規則を使用するかどうかを示すブール値です。デフォルト値はfalse。
trueの場合、図形の重なりが奇数枚の部分のみ塗りつぶされます。
antialised
形状のエッジにアンチエイリアスを適用するかどうかを示すブール値。デフォルト値はtrue。
※この値を変更した時の違いを確認する方法が不明です。
使用例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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'」というエラーが発生します。
あわせて読みたい記事

【SwiftUI】グラデーションの使い方
グラデーションとは、連続した階調で色調や透明度が変化していく色の指定を指します。SwiftUIでは線形、放射状、円すい状の3種類のグラデーションが使えます。これらのグラデーションはすべて、Viewとして単独で使用したり、Modifier...

【SwiftUI】組み込み図形の描画
SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。これらの部品はShapeプロトコルに準じています。

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