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

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中用另一个形状剪辑一个形状？

【英文标题】：How can I clip a Shape with another Shape in 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()
    

【参考方案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 )