Блог

Я создаю пользовательский путь в SwiftUI и заливаю его красным цветом, я хочу указать границу или обводку для своего пути. Как мы можем это сделать?

 struct ContentView: View
{
    var body: some View
    {
    
    Path { path in
        path.addArc(center: CGPoint(x: 100, y: 300), radius: 200, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 0), clockwise: false)
    }
    .fill(Color.red)

    
    
}
}
  

Вам нужно будет обводить и заполнять путь отдельно. Вот один из способов сделать это.

Присвойте свой путь переменной, а затем используйте ее для заполнения, а затем наложите на нее тот же обводочный путь. Примечание: вам нужно использовать path.closeSubpath() , чтобы закрыть свой путь, иначе будет обводиться только дуга.

 struct ContentView: View
{
    var body: some View {
        let path = Path { path in
            path.addArc(center: CGPoint(x: 100, y: 300), radius: 200, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 0), clockwise: false)
            path.closeSubpath()
        }
        path.fill(Color.red).overlay(path.stroke(Color.black, lineWidth: 2))
    }
}
  

Сначала начните с объявления пользовательского Shape . Вам нужно только реализовать func path(in rect: CGRect) -> Path :

 struct Diamond: Shape {
    func path(in rect: CGRect) -> Path {
        let topMid = CGPoint(x: rect.midX, y: rect.minY)
        let trailingMid = CGPoint(x: rect.maxX, y: rect.midY)
        let bottomMid = CGPoint(x: rect.midX, y: rect.maxY)
        let leadingMid = CGPoint(x: rect.minX, y: rect.midY)
        var path = Path()
        path.move(to: topMid)
        path.addLine(to: trailingMid)
        path.addLine(to: bottomMid)
        path.addLine(to: leadingMid)
        path.addLine(to: topMid)
        return path
    }
}
  

и затем вы можете поместить в ZStack : ваш фон, обрезанный до вашей пользовательской формы, и вашу пользовательскую форму с нанесенным обводкой:

 struct ContentView: View {

    var body: some View {
        ZStack {
            Color.blue
                .clipShape(Diamond())
            Diamond()
                .stroke(Color.purple, lineWidth: 4)
        }   .padding()
    }
 }