Button Stroke Set Gap 在特定位置 Swiftui

Question

我在 SwiftUI 中使用以下代码为所有边添加了边框。我想像下面这样修剪特定位置的笔划。

想要实现:-

输出:-

代码:-

import SwiftUI

struct RoundTrimImage: View {

var body: some View {
    VStack{
        Button(action: {
            print("Round Action")
        }) {
            Text("Press")
                .frame(width: 100, height: 100)
                .foregroundColor(Color.black)
                .background(Color.red)
                .clipShape(Circle()).padding(5)
                .overlay(
                    RoundedRectangle(cornerRadius: 100)
                        .trim(from: 0, to: CGFloat(0.8))
                        .stroke(Color.blue, lineWidth: 2)
                )
           }
         }
      }
  }

问题:有人可以向我解释如何调整斯托克特定位置，我已经尝试使用上面的代码但还没有结果。

有人可以向我解释如何获得进度吗？

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

可能的方法是使用 Arc 准备所需的形状，然后将其旋转到任何需要的位置。

使用 Xcode 13.2/iOS 15.2 准备的演示

struct DemoView: View {

    var body: some View {
        VStack{
            Button(action: {
                print("Round Action")
            }) {
                Text("Press")
                    .frame(width: 100, height: 100)
                    .foregroundColor(Color.black)
                    .background(Color.red)
                    .clipShape(Circle()).padding(5)
                    .overlay(
                        RotatedShape(shape: CutShape(), angle: .degrees(-120))
                            .stroke(Color.blue, lineWidth: 2)
                    )
            }
        }
    }
}

private struct CutShape: Shape {
    func path(in rect: CGRect) -> Path {
        Path {
            $0.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.midY, startAngle: Angle(degrees: -5), endAngle: Angle(degrees: 5), clockwise: true)
        }
    }
}