Question

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

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

我希望渐变沿线移动，即，这张图片中最暗的点应始终位于笔画（1b）的末尾，而不是当前的（1a）
是否可以在一侧给笔划一个 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

对于Nr.1，您可以尝试lineJoin：

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

对于1号：这听起来更具挑战性。大声思考：

自

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

具有angle属性，您可以使用笔触中的值来调整角度。

SwiftUI圆描边渐变

2 个答案: