SwiftUI 圆形描边渐变

Question

我已经实现了一个圆形笔划，如下图所示（当然没有数字）。

不幸的是，我遇到了两个您可以帮助我的问题。

1. 我希望渐变沿着这条线走，即这张图片中最暗的点应该总是在笔画的末尾（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)
}