# even-odd fill mode

{% tabs %}
{% tab title="💈範例" %}
![with (top row) & without (bottom row) even-odd fill mode](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FnwtR3LE6la6IYXK2RCME%2FeoFill%20with%20gradients.png?alt=media\&token=6a4133f1-c9ac-4374-9d09-bc91522cb29a)

⬆️ 需要：&#x20;

* [vector2d](../../../../custom/package/geometrykit/vector2d "mention"), [rect.inset-by](../../../../swift/scope/framework/built-in-frameworks/core-graphics/cgrect+ext/rect.inset-by "mention"), [floating-+-int](../../../../swift/type/category/basic/numbers/floating-point/floating-+-int "mention"),&#x20;
* [.evenoddfill](.evenoddfill "mention"), [shapestyle+lineargradient](../../shapestyle/shapestyle+lineargradient "mention")

```swift
import SwiftUI
import Vector2D        // for 🌀Rectangular

struct EOFillShape: Shape {
    
    // ⭐ 要畫幾層的線
    let layers: Int
    
    func path(in rect: CGRect) -> Path {
        let dx = pad(rect)            // 計算內縮的量
        return Path { path in
            for i in 0..<layers {
                // 🌀CGRect + .inset(by:), 🌀Int+
                path.addRect(rect.inset(by: dx * i))
            }
        }
    }
}

extension EOFillShape {
    // 計算每次內縮 (inset) 的量
    func pad(_ rect: CGRect) -> CGFloat {
        // 🌀Rectangular, 🌀Int+
        let padding = rect.minSide / 2.0 / layers
        return min(20, padding)    // 不超過 20
    }
}

struct EOFillShape_Previews: PreviewProvider {
    static var previews: some View {
        HStack {
            ForEach(1..<6){ i in
                let shape = EOFillShape(layers: i)
                let black = Color.black
                VStack {
                    shape
                    
                        // ⭐ use even-odd fill mode
                        // 🌀ShapeStyle+ , FillStyle+
                        .fill(.diagonal(.green, .blue), style: .evenOddFill)
                        
                        // ⭐ 如果沒有 compositingGroup，整塊都會有陰影❗
                        .compositingGroup()
                        
                        .shadow(radius: 8)
                        .overlay(shape.stroke(black))
                    shape
                        // 🌀ShapeStyle+
                        .fill(.diagonal2(.pink, .purple, .blue))
                        .shadow(radius: 8)
                        .overlay(shape.stroke(black))
                }
            }
        }
        .frame(height: 200)
        .padding()
        .background(Color.gray)
    }
}
```
{% endtab %}

{% tab title="📘 手冊" %}
* SwiftOnTap ⟩ View ⟩ [compositingGroup()](https://swiftontap.com/view/compositinggroup\(\)) → some View.
{% endtab %}

{% tab title="👥 相關" %}
* 使用 [bian-wei-tong-tu-ceng](../../../view/drawing/bian-wei-tong-tu-ceng "mention") 才不會讓挖空的部分也有陰影。
* [.destinationout](../../../view/drawing/blend-mode/.destinationout "mention") 混色模式也可以用來挖洞。
{% endtab %}

{% tab title="🗣 討論" %}
* [How can I clip a Shape with another Shape in SwiftUI?](https://stackoverflow.com/a/67128123/5409815) ⭐️ - even-odd fill mode.
{% endtab %}
{% endtabs %}
