SwiftUI 圆形描边渐变

Question

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

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

我想要 渐变沿着这条线走，即这张图片中最暗的点应该总是在笔画的末尾(1b)而不是现在在(1a)

是否可以给中风一个 lineCap .round一侧和一条线帽.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)
}