如何在 SwiftUI 中创建 2 个重叠连接的环

Question

见下文。它不是两个环的简单叠加

Answer 1

这是一种方法。用 2.overlay秒重新绘制第一个 ( .orange) 圆的上半部分，使其与第二个 ( .yellow) 圆重叠。

注意：我添加了ringColors、lineWidth和scaleaslet以便可以轻松地对它们进行实验：

struct ContentView: View {
    
    var body: some View {
        let ring1Color: Color = .orange
        let ring2Color: Color = .yellow
        let lineWidth: CGFloat = 40
        let scale: CGFloat = 0.7
        
        Circle()
            .scale(scale)
            .stroke(lineWidth: lineWidth)
            .foregroundColor(ring1Color)
            .offset(x: -lineWidth/2)
            .overlay(Circle()
                        .scale(scale)
                        .stroke(lineWidth: lineWidth)
                        .foregroundColor(ring2Color)
                        .offset(x: lineWidth/2))
            .overlay(Circle()
                        .trim(from: 0.5, to: 1)
                        .scale(scale)
                        .stroke(lineWidth: lineWidth)
                        .foregroundColor(ring1Color)
                        .offset(x: -lineWidth/2))
    }
}

这里我用了.foregroundColor(.blue)最后一个.overlay来揭示魔法。绘制顺序为：1) .orange, 2) .yellow, 3).blue