如何在 SwiftUI 中用另一个形状剪辑一个形状？答案

【问题标题】：How can I clip a Shape with another Shape in SwiftUI?如何在 SwiftUI 中用另一个形状剪辑一个形状？
【发布时间】：2021-04-16 14:58:08
【问题描述】：

我想用绿色的半圆夹住红色的正方形。我试过 .mask 和 .clipShape 但是我不能让它工作。有人可以分享一下它是怎么做的吗？

import SwiftUI

struct TestEndBarView: View {
    var body: some View {
        ZStack {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 500, height: 500)
                Circle()
                    .trim(from: 0.5, to: 1.0)
                    .fill(Color.green)
                    .rotationEffect(Angle(degrees: 90))
                    .frame(width: 500, height: 500)
                    .offset(x: -250)
                    
        }
    }
}

struct TestEndBarView_Previews: PreviewProvider {
    static var previews: some View {
        TestEndBarView()
    }
}

【问题讨论】：

标签： swift swiftui

【解决方案1】：

在代码中使用eoFill：

struct ContentView: View {

    var body: some View {
        
        CustomShape()
            .fill(Color.purple, style: FillStyle(eoFill: true, antialiased: true))
            .frame(width: 200, height: 200, alignment: .center)
            .shadow(radius: 10.0)
 
    }
}

struct CustomShape: Shape {
    
    func path(in rect: CGRect) -> Path {
        
        return Path { path in
            path.addArc(center: CGPoint(x: rect.minX, y: rect.midY), radius: rect.height/2, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 270), clockwise: true)
            path.addRect(CGRect(x: rect.minX, y: rect.minY, width: rect.width, height: rect.height))
 
        }
        
    }
}

【讨论】：

哦，非常感谢。我也在下面附上了我自己的代码。也许对将来偶然发现这个问题的人也有用。
@AndiAna：我看到了你的代码，你硬编码的值不能重用，你还用线条创建了 Rect，你可以这么容易地使用 Rect！
我将其更改为使用 rect.width 等。。是的，我需要进一步修改形状，并且考虑基本线条有时比形状更容易。

【解决方案2】：

创建一个符合Shape 的struct。

实现func path(in rect: CGRect) -> Path

创建一个Path。添加矩形，然后添加圆形。

将isEOFilled 设置为true 填充形状

【讨论】：

【解决方案3】：

我的代码就是这个基本代码。也许有人觉得这很有用，所以我也附在这里。

import SwiftUI

struct TestEndBarView: View {
    var body: some View {
        ZStack {
            BoxCutOut()
                .foregroundColor(Color.red)
                    
        }
    }
}

struct TestEndBarView_Previews: PreviewProvider {
    static var previews: some View {
        TestEndBarView()
    }
}

struct BoxCutOut: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x:0, y: 0))
            path.addLine(to: CGPoint(x:rect.width, y:0))
            path.addLine(to: CGPoint(x:rect.width, y:rect.height))
            path.addLine(to: CGPoint(x:0, y:rect.height))
            path.addArc(center: CGPoint(x: 0, y: rect.height/2), radius: rect.height/2, startAngle: .degrees(90), endAngle: .degrees(270), clockwise: true )
        }
    }
}

【讨论】：