SwiftUI Круговой градиент обводки

Question

Я применил круговой штрих, как вы можете видеть на картинке ниже (конечно, без цифр ?).

К сожалению, я столкнулся с двумя проблемами, с которыми вы можете мне помочь.

1. Мне нужен градиент от до go вдоль линии, т.е. самая темная точка на этом изображении всегда должна быть в конце обводки (1b), а не как в настоящее время в (1a)

2. Можно ли дать штриху lineCap .round с одной стороны и lineCap .butt с другой стороны? Я хотел бы иметь закругленную линию на конце (1b) и прямую линию на (2), что соответствует .butt.

Вот мой пример кода

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

Я был бы рад, если бы мне там помогли ?

Answer 1

для 1) вы можете попробовать:

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

для 2) вы можете попробовать что-то вроде этого:

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

Answer 2

Для №1 вы можете попробовать lineJoin:

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

Для №1: это звучит более сложно. Мысли вслух:

Поскольку

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

имеет свойство angle, вы можете регулировать угол с помощью значения от stroke.