Question

我想用绿色半圆夹住红色方块。我试过 .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()
    }
}

Answer 1

创建一个符合 struct 的 Shape。

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

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

将 isEOFilled 设置为 true 填充形状

Answer 2

在代码中使用 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))
 
        }
        
    }
}

Answer 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 )
        }
    }
}

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

3 个答案: