Соединяем две точки с помощью отрезков прямых линий и закругленных углов в SwiftUI

struct CurvedArrowDemo: View {
    var body: some View {
        let start: CGPoint = CGPoint(x: 100, y: 100)
        let end: CGPoint = CGPoint(x: 300, y: 300)

        ZStack {
            Circle()
                .fill(.blue)
                .frame(width: 16)
                .position(start)
            
            Path { path in
                path.move(to: start)
                path.addLine(to: end)
            }
            .stroke(.gray, lineWidth: 4)


            Path { path in
                path.move(to: start)
                path.addQuadCurve(to: end, control: CGPoint(x: 100, y: 300))
                
            }
            .stroke(.gray, lineWidth: 4)
            
            
            Path { path in
                path.move(to: start)
                path.addCurve(to: end, control1: CGPoint(x: 100, y: 200), control2: CGPoint(x: 300, y: 200))
            }
            .stroke(.gray, lineWidth: 4)
            
            Path { path in
                path.move(to: start)
                path.addLine(to: CGPoint(x: 100, y: 300))
                path.addLine(to: end)
            }
            .stroke(.gray, lineWidth: 4)
            
            
            Circle()
                .fill(.red)
                .frame(width: 16)
                .position(end)
        }
    }
}

struct CurvedArrowDemo: View {

    var body: some View {

        let start: CGPoint = CGPoint(x: 100, y: 100)

        let end: CGPoint = CGPoint(x: 300, y: 300)

​

        ZStack {

            Circle()

                .fill(.blue)

                .frame(width: 16)

                .position(start)

            Path { path in

                path.move(to: start)

                path.addLine(to: end)

            }

            .stroke(.gray, lineWidth: 4)

​

​

            Path { path in

                path.move(to: start)

                path.addQuadCurve(to: end, control: CGPoint(x: 100, y: 300))

            }

            .stroke(.gray, lineWidth: 4)

            Path { path in

                path.move(to: start)

                path.addCurve(to: end, control1: CGPoint(x: 100, y: 200), control2: CGPoint(x: 300, y: 200))

            }

            .stroke(.gray, lineWidth: 4)

            Path { path in

                path.move(to: start)

                path.addLine(to: CGPoint(x: 100, y: 300))

                path.addLine(to: end)

            }

            .stroke(.gray, lineWidth: 4)

            Circle()

                .fill(.red)

                .frame(width: 16)

                .position(end)

        }

    }

}

ZStack {            
    let start: CGPoint = CGPoint(x: 100, y: 100)
    let end: CGPoint = CGPoint(x: 300, y: 300)

    Circle()
            .fill(.blue)
            .frame(width: 16)
            .position(start)

    let width = abs(start.x - end.x)
    let height = abs(start.y - end.y)
    let rect = CGRect(origin: .zero, size: CGSize(width: width, height: height))
    let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: 8, height: 8))
    let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)
    
    trimmed
        .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
        .frame(width: width, height: height)
        .zIndex(10)
        .scaleEffect(x: end.x > start.x ? 1 : -1, anchor: .leading)
        .scaleEffect(y: end.y > start.y ? 1 : -1, anchor: .top)
        .position(x: start.x + width/2, y: start.y + height/2)

        Circle()
            .fill(.red)
            .frame(width: 16)
            .position(end)

}

xxxxxxxxxx

ZStack {            

    let start: CGPoint = CGPoint(x: 100, y: 100)

    let end: CGPoint = CGPoint(x: 300, y: 300)

​

    Circle()

            .fill(.blue)

            .frame(width: 16)

            .position(start)

​

    let width = abs(start.x - end.x)

    let height = abs(start.y - end.y)

    let rect = CGRect(origin: .zero, size: CGSize(width: width, height: height))

    let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: 8, height: 8))

    let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)

    trimmed

        .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

        .frame(width: width, height: height)

        .zIndex(10)

        .scaleEffect(x: end.x > start.x ? 1 : -1, anchor: .leading)

        .scaleEffect(y: end.y > start.y ? 1 : -1, anchor: .top)

        .position(x: start.x + width/2, y: start.y + height/2)

​

        Circle()

            .fill(.red)

            .frame(width: 16)

            .position(end)

​

}

let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight], cornerRadii: CGSize(width: 8, height: 8))
let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)

xxxxxxxxxx

let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight], cornerRadii: CGSize(width: 8, height: 8))

let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)

let width = abs(start.x - end.x)
let height = abs(start.y - end.y)
let rect = CGRect(origin: start, size: CGSize(width: width, height: height))

let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: 8, height: 8))
let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)

trimmed
    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
    .zIndex(10)

xxxxxxxxxx

let width = abs(start.x - end.x)

let height = abs(start.y - end.y)

let rect = CGRect(origin: start, size: CGSize(width: width, height: height))

​

let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: 8, height: 8))

let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)

​

trimmed

    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

    .zIndex(10)

trimmed
  .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
  .zIndex(10)
  .background(.yellow.opacity(0.2))

xxxxxxxxxx

trimmed

  .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

  .zIndex(10)

  .background(.yellow.opacity(0.2))

trimmed
    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
    .zIndex(10)
    .background(.yellow.opacity(0.2))
    .frame(width: width, height: height)

xxxxxxxxxx

trimmed

    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

    .zIndex(10)

    .background(.yellow.opacity(0.2))

    .frame(width: width, height: height)

let rect = CGRect(origin: .zero, size: CGSize(width: width, height: height))
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: 8, height: 8))
let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)
trimmed
    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
    .frame(width: width, height: height)
    .zIndex(10)
    .rotationEffect(.degrees(180))
    .scaleEffect(x: end.x > start.x ? 1 : -1, anchor: .leading)
    .scaleEffect(y: end.y > start.y ? 1 : -1, anchor: .top)
    .position(x: start.x + width/2, y: start.y + height/2)

xxxxxxxxxx

let rect = CGRect(origin: .zero, size: CGSize(width: width, height: height))

let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: 8, height: 8))

let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)

trimmed

    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

    .frame(width: width, height: height)

    .zIndex(10)

    .rotationEffect(.degrees(180))

    .scaleEffect(x: end.x > start.x ? 1 : -1, anchor: .leading)

    .scaleEffect(y: end.y > start.y ? 1 : -1, anchor: .top)

    .position(x: start.x + width/2, y: start.y + height/2)

let rect = CGRect(origin: start, size: CGSize(width: width, height: height))
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: 8, height: 8))
let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)
trimmed
    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
    .rotation(.degrees(180))
    .zIndex(10)

xxxxxxxxxx

let rect = CGRect(origin: start, size: CGSize(width: width, height: height))

let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: 8, height: 8))

let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)

trimmed

    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

    .rotation(.degrees(180))

    .zIndex(10)

trimmed
    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
    .frame(width: width, height: height)
    .zIndex(10)
    .background(.yellow.opacity(0.2))
    .scaleEffect(x: -1, y: 1, anchor: .leading)
    .position(x: start.x + width/2, y: start.y + height/2)


trimmed
    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
    .scale(x: -1, y: 1, anchor: .leading)
    .frame(width: width, height: height)
    .zIndex(10)
    .background(.red.opacity(0.2))
    .position(x: start.x + width/2, y: start.y + height/2)

xxxxxxxxxx

trimmed

    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

    .frame(width: width, height: height)

    .zIndex(10)

    .background(.yellow.opacity(0.2))

    .scaleEffect(x: -1, y: 1, anchor: .leading)

    .position(x: start.x + width/2, y: start.y + height/2)

​

​

trimmed

    .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

    .scale(x: -1, y: 1, anchor: .leading)

    .frame(width: width, height: height)

    .zIndex(10)

    .background(.red.opacity(0.2))

    .position(x: start.x + width/2, y: start.y + height/2)

struct RoundedCornerPath: View {
    
    enum PointDirection {
        case top
        case bottom
        case left
        case right
    }
    
    var start: CGPoint
    var startDirection: PointDirection
    var end: CGPoint
    var endDirection: PointDirection
    var radius: CGFloat = 8
    
    var outPathLength: CGFloat = 32
    
    private enum RelativePosition {
        case none
        
        case top
        case bottom
        case left
        case right
        
        case topLeft
        case topRight
        case bottomLeft
        case bottomRight
    }
    
    private var relativePosition: RelativePosition {
        if start == end {
            return .none
        }
        if start.x == end.x {
            return start.y < end.y ? .top : .bottom
        }
        
        if start.y == end.y {
            return start.x < end.x ? .left : .right
        }
        
        switch (start.x < end.x, start.y < end.y) {
            
        case (true, true):
            return .topLeft
        
        case (false, true):
            return .topRight
        
        case (true, false):
            return .bottomLeft
        case (false, false):
            return .bottomRight
        }
    }
    
    var body: some View {
        roundedCornerPath()
    }
    
    private func roundedCornerPath() -> some View {
        
        switch (startDirection, endDirection) {
        
        case (.top, .top):
            break
        case (.top, .right):
            break
        case (.top, .bottom):
            break
        case (.top, .left):
            break
            
            
        case (.right, .top):
            
            switch relativePosition {
            case .none:

                let endPoint1 = CGPoint(x: start.x + outPathLength, y: start.y - outPathLength/2 )
                let subPath1 = subPath(start: start, end: endPoint1)
                let endPoint2 = CGPoint(x: start.x + outPathLength/2, y: start.y - outPathLength )
                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))
                let subPath3 = subPath(start: endPoint2, end: end)
                return AnyView(ZStack {
                    subPath1
                    subPath2
                    subPath3
                })
   
            case .top, .topRight:
                let diffY = end.y - start.y
                let endPoint1 = CGPoint(x: start.x + outPathLength, y: start.y + diffY/4 )
                let subPath1 = subPath(start: start, end: endPoint1)
                let endPoint2 = CGPoint(x: start.x + outPathLength/2, y: start.y + diffY/2 )
                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))
                let subPath3 = subPath(start: endPoint2, end: end)
                return AnyView(ZStack {
                    subPath1
                    subPath2
                    subPath3
                })
            case .bottom:
                let endPoint1 = CGPoint(x: start.x + outPathLength, y: end.y)
                let subPath1 = subPath(start: start, end: endPoint1)
                let endPoint2 = CGPoint(x: start.x + outPathLength/2, y: end.y - outPathLength)
                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))
                let subPath3 = subPath(start: endPoint2, end: end)
                return AnyView(ZStack {
                    subPath1
                    subPath2
                    subPath3
                })
            case .left, .bottomLeft:
                let diffX = end.x - start.x
                let endPoint1 = CGPoint(x: start.x + diffX/2, y: end.y - outPathLength/2)
                let subPath1 = subPath(start: start, end: endPoint1)
                let endPoint2 = CGPoint(x: start.x + diffX*3/4, y: end.y - outPathLength)
                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))
                let subPath3 = subPath(start: endPoint2, end: end)
                return AnyView(ZStack {
                    subPath1
                    subPath2
                    subPath3
                })
            case .right, .bottomRight:
                let diffX = end.x - start.x
                let endPoint1 = CGPoint(x: start.x + outPathLength, y: end.y - outPathLength/2)
                let subPath1 = subPath(start: start, end: endPoint1)
                let endPoint2 = CGPoint(x: end.x - diffX, y: end.y - outPathLength)
                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))
                let subPath3 = subPath(start: endPoint2, end: end)
                return AnyView(ZStack {
                    subPath1
                    subPath2
                    subPath3
                })

            case .topLeft:
                return AnyView(subPath(start: start, end: end))
            }

        case (.right, .right):
            break
        case (.right, .bottom):
            break
        case (.right, .left):
            break
            
            
        case (.bottom, .top):
            break
        case (.bottom, .right):
            break
        case (.bottom, .bottom):
            break
        case (.bottom, .left):
            break
            
            
        case (.left, .top):
            break
        case (.left, .right):
            break
        case (.left, .bottom):
            break
        case (.left, .left):
            break

        }
        
        return AnyView(Text("to be implemented"))
        
    }

    
    private func subPath(start: CGPoint, end: CGPoint, rotation: Angle = .zero) -> some View {
        let width = abs(start.x - end.x)
        let height = abs(start.y - end.y)
        let rect = CGRect(origin: .zero, size: CGSize(width: width, height: height))

        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: radius, height: radius))
        let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)
        
        return trimmed
            .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))
            .rotation(rotation)
            .frame(width: width, height: height)
            .zIndex(10)
            .scaleEffect(x: end.x > start.x ? 1 : -1, anchor: .leading)
            .scaleEffect(y: end.y > start.y ? 1 : -1, anchor: .top)
            .position(x: start.x + width/2, y: start.y + height/2)

    }
    
}

xxxxxxxxxx

struct RoundedCornerPath: View {

    enum PointDirection {

        case top

        case bottom

        case left

        case right

    }

    var start: CGPoint

    var startDirection: PointDirection

    var end: CGPoint

    var endDirection: PointDirection

    var radius: CGFloat = 8

    var outPathLength: CGFloat = 32

    private enum RelativePosition {

        case none

        case top

        case bottom

        case left

        case right

        case topLeft

        case topRight

        case bottomLeft

        case bottomRight

    }

    private var relativePosition: RelativePosition {

        if start == end {

            return .none

        }

        if start.x == end.x {

            return start.y < end.y ? .top : .bottom

        }

        if start.y == end.y {

            return start.x < end.x ? .left : .right

        }

        switch (start.x < end.x, start.y < end.y) {

        case (true, true):

            return .topLeft

        case (false, true):

            return .topRight

        case (true, false):

            return .bottomLeft

        case (false, false):

            return .bottomRight

        }

    }

    var body: some View {

        roundedCornerPath()

    }

    private func roundedCornerPath() -> some View {

        switch (startDirection, endDirection) {

        case (.top, .top):

            break

        case (.top, .right):

            break

        case (.top, .bottom):

            break

        case (.top, .left):

            break

        case (.right, .top):

            switch relativePosition {

            case .none:

​

                let endPoint1 = CGPoint(x: start.x + outPathLength, y: start.y - outPathLength/2 )

                let subPath1 = subPath(start: start, end: endPoint1)

                let endPoint2 = CGPoint(x: start.x + outPathLength/2, y: start.y - outPathLength )

                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))

                let subPath3 = subPath(start: endPoint2, end: end)

                return AnyView(ZStack {

                    subPath1

                    subPath2

                    subPath3

                })

            case .top, .topRight:

                let diffY = end.y - start.y

                let endPoint1 = CGPoint(x: start.x + outPathLength, y: start.y + diffY/4 )

                let subPath1 = subPath(start: start, end: endPoint1)

                let endPoint2 = CGPoint(x: start.x + outPathLength/2, y: start.y + diffY/2 )

                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))

                let subPath3 = subPath(start: endPoint2, end: end)

                return AnyView(ZStack {

                    subPath1

                    subPath2

                    subPath3

                })

            case .bottom:

                let endPoint1 = CGPoint(x: start.x + outPathLength, y: end.y)

                let subPath1 = subPath(start: start, end: endPoint1)

                let endPoint2 = CGPoint(x: start.x + outPathLength/2, y: end.y - outPathLength)

                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))

                let subPath3 = subPath(start: endPoint2, end: end)

                return AnyView(ZStack {

                    subPath1

                    subPath2

                    subPath3

                })

            case .left, .bottomLeft:

                let diffX = end.x - start.x

                let endPoint1 = CGPoint(x: start.x + diffX/2, y: end.y - outPathLength/2)

                let subPath1 = subPath(start: start, end: endPoint1)

                let endPoint2 = CGPoint(x: start.x + diffX*3/4, y: end.y - outPathLength)

                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))

                let subPath3 = subPath(start: endPoint2, end: end)

                return AnyView(ZStack {

                    subPath1

                    subPath2

                    subPath3

                })

            case .right, .bottomRight:

                let diffX = end.x - start.x

                let endPoint1 = CGPoint(x: start.x + outPathLength, y: end.y - outPathLength/2)

                let subPath1 = subPath(start: start, end: endPoint1)

                let endPoint2 = CGPoint(x: end.x - diffX, y: end.y - outPathLength)

                let subPath2 = subPath(start: endPoint1, end: endPoint2, rotation: .degrees(180))

                let subPath3 = subPath(start: endPoint2, end: end)

                return AnyView(ZStack {

                    subPath1

                    subPath2

                    subPath3

                })

​

            case .topLeft:

                return AnyView(subPath(start: start, end: end))

            }

​

        case (.right, .right):

            break

        case (.right, .bottom):

            break

        case (.right, .left):

            break

        case (.bottom, .top):

            break

        case (.bottom, .right):

            break

        case (.bottom, .bottom):

            break

        case (.bottom, .left):

            break

        case (.left, .top):

            break

        case (.left, .right):

            break

        case (.left, .bottom):

            break

        case (.left, .left):

            break

​

        }

        return AnyView(Text("to be implemented"))

    }

​

    private func subPath(start: CGPoint, end: CGPoint, rotation: Angle = .zero) -> some View {

        let width = abs(start.x - end.x)

        let height = abs(start.y - end.y)

        let rect = CGRect(origin: .zero, size: CGSize(width: width, height: height))

​

        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topRight, .bottomLeft], cornerRadii: CGSize(width: radius, height: radius))

        let trimmed = Path(path.cgPath).trimmedPath(from: 0, to: 0.5)

        return trimmed

            .stroke(style: .init(lineWidth: 4, lineCap: .round, lineJoin: .round))

            .rotation(rotation)

            .frame(width: width, height: height)

            .zIndex(10)

            .scaleEffect(x: end.x > start.x ? 1 : -1, anchor: .leading)

            .scaleEffect(y: end.y > start.y ? 1 : -1, anchor: .top)

            .position(x: start.x + width/2, y: start.y + height/2)

​

    }

}

struct CurvedArrowDemo: View {

    var body: some View {

        ZStack {
            // none
            makePath(start: .init(x: 200, y: 150), end: .init(x: 200, y: 150))
            // top left
            makePath(start: .init(x: 50, y: 100), end: .init(x: 150, y: 150))
            // top
            makePath(start: .init(x: 300, y: 250), end: .init(x: 300, y: 350))
            // bottom
            makePath(start: .init(x: 100, y: 350), end: .init(x: 100, y: 250))
            // left
            makePath(start: .init(x: 150, y: 400), end: .init(x: 250, y: 400))
            // right
            makePath(start: .init(x: 150, y: 500), end: .init(x: 50, y: 500))
            // top right
            makePath(start: .init(x: 150, y: 600), end: .init(x: 50, y: 650))
            // bottom left
            makePath(start: .init(x: 200, y: 550), end: .init(x: 350, y: 500))
            // bottom right
            makePath(start: .init(x: 350, y: 700), end: .init(x: 250, y: 650))

        }
    }
    
    func makePath(start: CGPoint, end: CGPoint) -> some View {
        return ZStack {
            Circle()
                .fill(.blue)
                .frame(width: 16)
                .position(start)
                .overlay(content: {
                    Text("start")
                        .position(start)
                        .offset(y: 16)
                })

            RoundedCornerPath(start: start, startDirection: .right, end: end, endDirection: .top)
            
            Circle()
                .fill(.red)
                .frame(width: 16)
                .position(end)

        }
    }
}

xxxxxxxxxx

struct CurvedArrowDemo: View {

​

    var body: some View {

​

        ZStack {

            // none

            makePath(start: .init(x: 200, y: 150), end: .init(x: 200, y: 150))

            // top left

            makePath(start: .init(x: 50, y: 100), end: .init(x: 150, y: 150))

            // top

            makePath(start: .init(x: 300, y: 250), end: .init(x: 300, y: 350))

            // bottom

            makePath(start: .init(x: 100, y: 350), end: .init(x: 100, y: 250))

            // left

            makePath(start: .init(x: 150, y: 400), end: .init(x: 250, y: 400))

            // right

            makePath(start: .init(x: 150, y: 500), end: .init(x: 50, y: 500))

            // top right

            makePath(start: .init(x: 150, y: 600), end: .init(x: 50, y: 650))

            // bottom left

            makePath(start: .init(x: 200, y: 550), end: .init(x: 350, y: 500))

            // bottom right

            makePath(start: .init(x: 350, y: 700), end: .init(x: 250, y: 650))

​

        }

    }

    func makePath(start: CGPoint, end: CGPoint) -> some View {

        return ZStack {

            Circle()

                .fill(.blue)

                .frame(width: 16)

                .position(start)

                .overlay(content: {

                    Text("start")

                        .position(start)

                        .offset(y: 16)

                })

​

            RoundedCornerPath(start: start, startDirection: .right, end: end, endDirection: .top)

            Circle()

                .fill(.red)

                .frame(width: 16)

                .position(end)

​

        }

    }

}