Is there a way to create a curved arrow that connects two views in SwiftUI? - ios

Question

I would like to connect two SwiftUI Views with an arrow, one pointing to the other. For example, in this View:
struct ProfileIconWithPointer: View {
var body: some View {
VStack {
Image(systemName: "person.circle.fill")
.padding()
.font(.title)
Text("You")
.offset(x: -20)
}
}
}
I have a Text view and an Image view. I would like to have an arrow pointing from one to the other, like this:
However, all the solutions that I could find rely on knowing the position of each element apriori, which I'm not sure SwiftUI's declarative syntax allows for.

Answer 1

you can use the following code to display an arrow.
struct CurvedLine: Shape {
let from: CGPoint
let to: CGPoint
var control: CGPoint
var animatableData: AnimatablePair<CGFloat, CGFloat> {
get {
AnimatablePair(control.x, control.y)
}
set {
control = CGPoint(x: newValue.first, y: newValue.second)
}
}
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: from)
path.addQuadCurve(to: to, control: control)
let angle = atan2(to.y - control.y, to.x - control.x)
let arrowLength: CGFloat = 15
let arrowPoint1 = CGPoint(x: to.x - arrowLength * cos(angle - .pi / 6), y: to.y - arrowLength * sin(angle - .pi / 6))
let arrowPoint2 = CGPoint(x: to.x - arrowLength * cos(angle + .pi / 6), y: to.y - arrowLength * sin(angle + .pi / 6))
path.move(to: to)
path.addLine(to: arrowPoint1)
path.move(to: to)
path.addLine(to: arrowPoint2)
return path
}
}
you can use this in your code as follows.
struct ContentView: View {
var body: some View {
VStack {
Text("You")
.alignmentGuide(.top) { d in
d[.bottom] - 30
}
Image(systemName: "person.circle.fill")
.padding()
.font(.title)
}
.overlay(
CurvedLine(from: CGPoint(x: 50, y: 50),
to: CGPoint(x: 300, y: 200),
control: CGPoint(x: 100, y: -300))
.stroke(Color.blue, lineWidth: 4)
)
}
}
This will looks like as follows.
Depend on your scenario modify the code. Hope this will helps you.