iOS How to draw a curve/arc by connecting 3 points

[Bayan]

I'm developing an app that lets the user draw with his finger 3 points then the app should connect those three to produce an arc. 1st point and 3rd point are the ends of the arc and the 2nd point is the control/center point.

I finished the 3 dots part but I'm struggling with drawing an arc accurately. When I used CGContextAddQuadCurveToPoint the produced arc is on the 1st and 3rd points (ends of the arc) but it does not go through the 2nd point. These are my arguments,

CGContextMoveToPoint(UIGraphicsGetCurrentContext(), first.x, first.y);
CGContextAddQuadCurveToPoint(UIGraphicsGetCurrentContext(), second.x, second.y, third.x, third.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());

Am I using the right method or should I go for something like CGContextAddArcToPoint, CGContextAddArc or bezier paths? Can someone please explain for me the general idea of how I can connect 3 points?

Thanks in advance!

 

[chown33]

Google search terms: circle 3 points

Top result:
Equation of a Circle from 3 Points

Also see:
http://en.wikipedia.org/wiki/Circumscribed_circle
in particular, the section about the circumcircle of a triangle.

This also appeared in the search results:
http://www.mathopenref.com/const3pointcircle.html
I point it out because there are many geometry solutions at that site, and this isn't your first plane geometry question.


If you don't want a circular arc (constant radius), then there may not be a unique elliptical path that intersects all 3 points.

 

[ArtOfWarfare]

I haven't done any programatic arcs in my apps, but I do mess around a lot with a lot of graphics programs and it is my understanding that arcs often don't go through their control point.

Instead, the arc starts by heading on a path from the start point that is tangent with a line between the first and second points, and then ends on a path towards the end point that is tangent with a line between the second and third points. In fact, the only time this would cause the arc to head through all three points would be if the three points all lied on a single line, correct?

I think what you might actually be looking for is a circular drawing method. I know there is one that takes a center point, a starting angle, and an ending angle. I know that using that method plus some geometry, it's possible to change the three points the user inputs into the output you want. As much fun as I would find it to solve that problem, I think I've spent enough time writing this already... plus I think the wikipedia article chown linked to might have the solution in it already.

 

[Bayan]

chown33:
This isn't a plane geometry question. Even if I knew how to do that mathematically, I'm struggling with what methods to use.. and yes, I don't want a circular arc (constant radius) but a path that intersects all 3 points. Thanks for the links you've shared they were helpful.

ArtOfWarfare:

the arc starts by heading on a path from the start point that is tangent with a line between the first and second points, and then ends on a path towards the end point that is tangent with a line between the second and third points.

That was my starting point but as you've said, it never goes through the second point. I'm going to try your suggested method, thanks.

Thanks for your help, chown33 & ArtOfWarfare.
I never worked with the CorePlot framework http://code.google.com/p/core-plot/ before, have you? and do you think that that might solve my problem?

 

[ArtOfWarfare]

Here's what I would do to get the results you want:

I'd use methods from here: https://developer.apple.com/library...rence.html#//apple_ref/c/func/CGContextAddArc

Specifically, I'd use this one:
CGContextAddArc

For the X and Y, you'll want to average the X and Y components of the 3 points individually. To get the start and end angles, use trig between that central X and Y point and the start and end points respectively. I'm not quite sure how to make it decide whether to go clockwise or not, but that shouldn't be too hard.

As far as that Core Plot, I'm not familiar with it. I tend to avoid using the code other people write.