将形状切成一半 Swiftui

Question

我想将形状切成两半并创建一个像这样的形状（紫色形状）：

就像将圆角矩形剪成两半一样。我当前的代码：

struct LeadingClipper: Shape {
    let leading: CGFloat

    func path(in rect: CGRect) -> Path {
        RoundedRectangle(cornerRadius: 25, style: .continuous).path(in: CGRect(x: rect.size.width - leading,y: 0 , width: rect.size.width, height: leading))
    }
}

Answer 1

这将创建您正在寻找的形状：

struct ContentView: View {
    private let width: CGFloat = 100

    var body: some View {
        RoundedRectangle(cornerRadius: 25, style: .continuous)
            .fill(Color.purple)
            .frame(width: width, height: 50)
            .offset(x: -width / 2)
            .clipped()
            .offset(x: width / 4)
            .frame(width: width / 2)
    }
}

结果：

这是如何运作的

1. 创建圆角矩形形状：

RoundedRectangle(cornerRadius: 25, style: .continuous)
    .fill(Color.purple)
    .frame(width: width, height: 50)

2. 将圆角矩形向左偏移。在注释中添加边框以显示视图的边界框 -offset修改器不会更改视图的布局，只是更改视觉偏移：

.offset(x: -width / 2)
//.background(Color.green)

3. 将视图剪切到其边界框。这会删除（临时）绿色方块之外的所有内容：

.clipped()

4. 将视图偏移回中心。另一个border评论显示仍然相同的实际边界框：

.offset(x: width / 4)
//.border(Color.red)

5. 最后，缩小边界框以适应这个新视图，该视图现在是原始宽度的一半。注释中的另一个边框显示新的边界框：

.frame(width: width / 2)
//.border(Color.blue)