SwiftUI Circular Stroke Gradient

Question

I have implemented a circular stroke as you can see in the picture below (of course without the numbers ).

Unfortunately, I encounter two problems that you may be able to help me with.

I want the gradient to go along the line, i.e. the darkest point in this picture should always be at the end of the stroke (1b) and not as currently at (1a)
Is it possible to give a stroke a lineCap .round on one side and a lineCap .butt on the other side? I would like to have a rounded line end at (1b) and a straight line at (2), which corresponds to .butt.

Here is my example code

struct CircularGradientLine: View {
    private let gradient = LinearGradient(
        gradient: Gradient(colors: [StyleGuide.Color.primary, .white]),
        startPoint: .leading,
        endPoint: .trailing)
    public var body: some View {
        ZStack {
            Circle()
                .stroke(Color.white, lineWidth: 46)

            Circle()
                .trim(from: 0, to: CGFloat(0.8))
                .stroke(gradient, style:
                    StrokeStyle(lineWidth: 46,
                                lineCap: .round))
        }.padding(60)
    }
}

I would be delighted if someone could help me there

workingdog support Ukraine · Accepted Answer · 2020-06-17T13:20:47.460

for 1) you could try:

private let gradient = AngularGradient(
    gradient: Gradient(colors: [Color.blue, .white]),
    center: .center,
    startAngle: .degrees(270),
    endAngle: .degrees(0))

for 2) you could try something like this:

public var body: some View {
    ZStack {
        Circle().stroke(Color.white, lineWidth: 46)

        Circle()
            .trim(from: 0, to: CGFloat(0.8))
            .stroke(gradient, style: StrokeStyle(lineWidth: 46, lineCap: .round))
            .overlay(
                Circle().trim(from: 0, to: CGFloat(0.8))
                .rotation(Angle.degrees(-4))
                .stroke(gradient, style: StrokeStyle(lineWidth: 46, lineCap: .butt)))

    }.padding(60)
}

Thanks for your answer. With `AngularGradient` I finally made it — Phillipp, Jun 17 '20 at 16:42

score 1 · Answer 2 · answered Jun 17 '20 at 13:00

For Nr.1 you could try lineJoin:

.stroke(Color.red, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))

For No.1: This sounds more challenging. Thinking out loud:

Since

AngularGradient(gradient: yourGradient, center: .bottomTrailing, angle: .degrees(0))

has an angle property you could adjust the angle with a value from stroke.

SwiftUI Circular Stroke Gradient

2 Answers2

Linked