Home > Software design >  How to create 2 overlapped connected rings in SwiftUI
How to create 2 overlapped connected rings in SwiftUI

Time:10-21

See below. It's not a simple overlay of two rings

enter image description here

CodePudding user response:

Here is one way to do it. Use 2 overlays redrawing the bottom half of the first circle to have it overlap the second circle.

Overlapping rings running in simulator

struct ContentView: View {
    
    var body: some View {
        Circle()
            .scale(0.70)
            .stroke(lineWidth: 40)
            .foregroundColor(.orange)
            .offset(x: -20)
            .overlay(Circle()
                        .scale(0.7)
                        .stroke(lineWidth: 40)
                        .foregroundColor(.yellow)
                        .offset(x: 20, y: 0))
            .overlay(Circle()
                        .trim(from: 0.5, to: 1)
                        .scale(0.7)
                        .stroke(lineWidth: 40)
                        .foregroundColor(.orange)
                        .offset(x: -20, y: 0))
    }
}
  • Related