What are the tangent parameters found in the .addArc method for SwiftUI?

Question

I've been playing around with the .addArc method on the Path view in SwiftUI but I'm still confused as to what the tangent parameters are doing. I'm more of a visual learner and I haven't been able to grasp it.

Would anyone have a visual explaining how the tangent parameters work in the method?

https://developer.apple.com/documentation/swiftui/path/addarc(tangent1end:tangent2end:radius:transform:)

Overkill

Doing another search yielded me this and it cleared it up. The drawing made it clear for me though it still is hard to visualize. Wondering if anyone knows if there's a way to visualize the points and lines as you write the code? twistedape.me.uk/2013/09/23/what-arctopointdoes – Overkill

The example given shows how to visualize it. This way of describing the arc makes it really easy to draw rounded rects etc because all that matters is the sides (edges) and the corner radius; you don’t have think about where the curve starts and stops. – Polytheism

Answer 1

Converting the comment to an answer for clarity.

As mentioned, this article explains it really well:

The red line is the path that the function will draw. P1 is the the point that the path is at before the function is called, x1, y1, x2, y2 correspond to the values passed in by the function, and r is the radius value. The function doesn’t line to the second point given, it stops at the end of the arc.

Culinary

This should be added to apple docs. Took me forever and I still didn't understand how this function works just by reading their docs. With this it was instantly obvious. – Arthropod

Answer 2

First of all:

(0,0) is on top left corner

in this case

---

--

--

--

So if we need to draw arc in right top corner we need to set start point in bottom left point.

path.move(to: CGPoint(x: 0, y: h))

and draw arc to top left and top right points:

path.addArc(tangent1End: CGPoint(x: 0, y: 0), tangent2End: CGPoint(x: w1, y: 0), radius: 50)

next if we need to add arc on the top right point:

---

Ester