如何将这个圆角的矩形绿色轮廓进一步向下移动

Question

我想要第一个图像（绿色轮廓）与第二个图像（蓝色轮廓）匹配。我很难弄清楚如何将圆角矩形（绿色轮廓）进一步向下移动以匹配第二个图像的外观。到目前为止，我已经附加了我的代码。请让我知道是否需要更多信息。

var color1 = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
var color2 = #colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1)
    var width: CGFloat = 300
    var height: CGFloat = 100
    var percent: CGFloat = 7
    @Binding var show: Bool

var body: some View {
    let multiplier = width / 44
    let progress = 1 - percent / 100

    return ZStack {
        RoundedRectangle(cornerRadius: 20, style: .continuous)
            .stroke(Color.black.opacity(0.1), style: StrokeStyle(lineWidth: multiplier))
            .frame(width: width, height: height)

        RoundedRectangle(cornerRadius: 20, style: .continuous)

            .trim(from: show ? 0.90 : 1, to: 1)
            .stroke(LinearGradient(gradient: Gradient(colors: [Color(color1), Color(color2)]), startPoint: .leading, endPoint: .bottomTrailing),
                    style: StrokeStyle(lineWidth: 2 * multiplier, lineCap: .round, lineJoin: .round, miterLimit: .infinity, dash: [20,0], dashPhase: 0))
            .frame(width: width, height: height)
    }
}

Answer 1

您可以通过更改trim的开始和结束位置来获得所需的结果 到以下内容。

.trim(from: show ? 0.90 : 0.93, to: 0.93)

结果：