SwiftUI 圆形描边渐变

Question

如下图所示，我已经实现了一个圆形轮廓（当然不带数字）。

不幸的是，我遇到了两个问题，您也许可以帮我解决。

1. 我希望渐变沿着线条进行，即此图片中最暗的点应始终位于笔画末端（1b），而不像目前在（1a）处。

2. 是否可以在一侧设置线段端点为 .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)
    }
}

如果有人能帮忙，我会非常高兴。

- Phillipp

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

- workingdog support Ukraine

---

谢谢你的回答。通过使用 AngularGradient，我终于成功了。 - Phillipp

Answer 2

对于第1个，你可以尝试使用lineJoin：

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

对于第一点： 这听起来更具有挑战性。 我在思考：

因为

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

有一个角度属性，你可以使用stroke的值来调整角度。

- Peter Pohlmann