> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/drawing/view.clipshape.md).

# view\.clipShape()

╱🚧 under construction

[SwiftUI](/ios/swiftui.md) ⟩ [view](/ios/swiftui/view.md) ⟩ [modifier](/ios/swiftui/view/modifier.md) ⟩ [rendering](/ios/swiftui/view/modifier/rendering.md) ⟩ <mark style="color:purple;">`.clipShape()`</mark>&#x20;

{% hint style="success" %} <mark style="color:yellow;">裁掉</mark> [view](/ios/swiftui/view/view.md) 在指定 [shape](/ios/swiftui/shapes/shape.md) <mark style="color:yellow;">外面的部分</mark>。
{% endhint %}

{% hint style="warning" %}
⭐️ 注意：<mark style="color:purple;">`.clipShape()`</mark> <mark style="color:yellow;">不會改變</mark> [frame](/ios/swiftui/view/layout/frame/.frame.md):exclamation:
{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}
:point\_right: [mismatching types](/ios/swiftui/view/drawing/view.clipshape/mismatching-types.md)\
:point\_right: [AnyShape](/ios/swiftui/shapes/shape/anyshape.md)：裡面有 <mark style="color:blue;">`MyAnyShape`</mark> (custom type erasure) 的[定義](/ios/swiftui/shapes/shape/anyshape.md#zhong-dian)\
:point\_right: [has non-Sendable type](/ios/swift/concurrency/sendable/has-non-sendable-type.md)：裡面有 <mark style="color:blue;">`MyShape`</mark> (custom enum) 的[定義](/ios/swift/concurrency/sendable/has-non-sendable-type.md#id-2)

```swift
import SwiftUI

struct TempView: View {
    
    @State var isOn = false
    
    private let size: CGFloat = 20
    
    var body: some View {
        VStack {
            text
            Toggle("切換", isOn: $isOn)
                .padding()
        }
        
    }
    
    // ⭐️ 注意：
    //    這裏用了三個方案，三個的回傳型別都不同(AnyShape, MyShape, MyAnyShape)， 
    //    所以 return type 必須用 `some Shape`，讓 compiler 自行判斷。
    private var dynamicShape: some Shape {
        
        // ⭐️ 方案一：使用 AnyShape (official type erasure)
//        isOn ? AnyShape(circle) : AnyShape(roundedRect)
        
        // ⭐️ 方案二：使用 MyShape (custom enum)
//        isOn ? MyShape.circle : MyShape.roundedRect(
//            cornerSize: CGSize(width: size, height: size)
//        )
        
        // ⭐️ 方案三：使用 MyAnyShape (custom type erasure)
        isOn ? MyAnyShape(circle) : MyAnyShape(roundedRect)
    }
    
    private var text: some View {
        Text("Clipped text in a circle")
            .frame(width: 175, height: 100)
            .foregroundColor(Color.white)
            .background(Color.blue)
            
            // ------------------------------------------------
            // ⭐️ 若使用動態形狀時，必須想辦法消除不同形狀的型別問題
            .clipShape(dynamicShape)
            
            // 🐞 下面的寫法會產生 "mismatching types" 的錯誤
            .clipShape(isOn ? Circle() : Capsule())
            // ------------------------------------------------
            
            .animation(.default, value: isOn)
    }
    
    private var roundedRect: some Shape {
        RoundedRectangle(cornerSize: 
            CGSize(width: size, height: size)
        )
    }
    
    private var circle: some Shape {
        Circle()
    }
}
```

{% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩  [View fundamentals](https://developer.apple.com/documentation/swiftui/view-fundamentals) ⟩ [View](https://developer.apple.com/documentation/swiftui/view) ⟩  [rendering modifiers](https://developer.apple.com/documentation/swiftui/view-graphics-and-rendering)
  * [.clipShape(\_:style:)](https://developer.apple.com/documentation/swiftui/view/clipshape\(_:style:\)) ： \
    [.cornerRadius()](https://developer.apple.com/documentation/swiftui/view/cornerradius\(_:antialiased:\)) 已經廢止 (<mark style="color:red;">deprecated</mark>)，用此 clipShape 代替
  * [.clipped(antialiased:)](https://developer.apple.com/documentation/swiftui/view/clipped\(antialiased:\))：將 view 突出 frame 的部分裁掉
    {% endtab %}

{% tab title="👥 相關" %}

* :bulb: [用 enum 封裝不同型別](/ios/swift/type/category/basic/enum/wrap-types.md)：使用 <mark style="color:purple;">`.clipShape()`</mark> 時可考慮此方法
* :package: [AnyShape](/ios/swiftui/shapes/shape/anyshape.md)
* :beginner: [type erasure](/ios/swift/type/erasure.md)
* 也可以考慮用[view.mask()](/ios/swiftui/view/drawing/mask/.mask.md) 達到類似效果。
  {% endtab %}

{% tab title="⛔ 錯誤" %}
:lady\_beetle: [mismatching types](/ios/swiftui/view/drawing/view.clipshape/mismatching-types.md)

:lady\_beetle: [has non-Sendable type](/ios/swift/concurrency/sendable/has-non-sendable-type.md)：裡面有 <mark style="color:blue;">`MyShape`</mark> (custom enum) 的[定義](/ios/swift/concurrency/sendable/has-non-sendable-type.md#id-2)
{% endtab %}
{% endtabs %}