I am a math-illiterate, so I apologize if this doesn't make sense...

I am working on trying to draw a custom interface using the iOS Core Graphics API.

In a 2D space, I need to create a "rounded" corner between an arc segment and a line running from the arc origin to an endpoint.

I'm trying to do this via the following: (if there's an easier way, please let me know)


r:  arc radius (ex: 200)
g:  radius of rounded corner (ex: 5)
s:  arc w/ center: 0,0, radius: r, start: P3, end: 200,0, dir: cw

Steps (this part is working)

  1. Draw line A from P1 (0, 0) to P2 (0, r - g) (ex: 195)

  2. Draw imaginary 45-degree line B that intersects y-axis at P2 with a slope of 1

  3. Calculate starting point (P3) of arc S from line B's intersection of arc S (ex: (4.9xx, 199.3xxx))

Here is the part I need help with...

??? Draw rounded-corner from P2 to P3 with radius of g ???

How do I find the x, y center-point (P4) that will allow me to draw an arc from P2 to P3?

Here's the diagram:


Please help!!!

  • $\begingroup$ If it's not too much trouble, would you mind posting a (link to a) diagram with all your variables labelled? I'm having a bit of trouble visualizing the type of rounded corner you're trying to create between an arc segment and a line. $\endgroup$ – Adriano Jul 11 '13 at 17:55
  • $\begingroup$ ok... I'll revise the post to remove the extraneous stuff and attach a link to an image... $\endgroup$ – Joshua Barker Jul 11 '13 at 18:48
  • $\begingroup$ I added the image, and I removed the graph-theory tag (which is for an entirely-different subject). $\endgroup$ – Blue Jul 11 '13 at 19:16
  • $\begingroup$ wow... these are all great answers... it's going to take me awhile to digest them and see which one works best for my situation... I'll try to get back to you all as soon as I can... thanks! $\endgroup$ – Joshua Barker Jul 11 '13 at 20:49

Presumably, you want a smooth transition from the red arc to the black ones. (As it turns out, your $45^\circ$ line interpretation is inaccurate, but we'll get back to that.) So,

  • The little circle must be tangent to the $y$-axis at $P_2$. In particular, this means that $P_4$ is exactly $g$ units to the right of $P_2$; that is, $|P_2P_4| = g$.

  • The little circle must be tangent to the big circle at $P_3$. A bit of circle geometry tells us that $P_4$ must lie on the radius $P_1P_3$. Thus, $|P_1P_4| = |P_1P_3|-|P_3P_4| = r - g$.

Now we know the lengths of two sides of right triangle $\triangle P_1P_2P_4$, and we can apply the Pythagorean Theorem to find the third:

$$\begin{align} |P_1P_2|^2 + |P_2 P_4|^2 &= |P_1 P_4|^2 \\[6pt] |P_1P_2|^2 + g^2 &= ( r - g )^2 \\[6pt] |P_1P_2|^2 &= ( r - g )^2 - g^2 = r ( r - 2 g ) \end{align}$$

Simply note that $|P_2P_4|$ is the $x$-coordinate of $P_4$, and $|P_1P_2|$ is the $y$-coordinate. Therefore,

$$P_4 = \left( \; g, \; \sqrt{r(r-2g)} \; \right)$$

Because there's no $45^\circ$ line between $P_2$ and $P_3$ (at least, not usually), you'll probably also need to know that

$$\begin{align} P_2 &= \left( \; 0, \; \sqrt{r(r-2g)} \; \right) &\text{(same $y$ as $P_4$, but on $y$-axis)} \\[6pt] P_3 &= \left( \; \frac{gr}{r-g}, \; \frac{r\;\sqrt{r(r-2g)}}{r-g} \; \right) &\text{(scaling-up $P_4$ by $\frac{|P_1P_3|}{|P_1P_4|} = \frac{r}{r-g}$)} \end{align}$$

To see why there's no $45^\circ$ line, consider an extreme case, where $r = 2g$. Here, the red arc is a full semi-circle that immediately starts up at $P_1$, and comes back down at $r$ units to the right on the $x$ axis; that is, $P_2$ is identical to $P_1$, and $P_3$ lies at the point $(r,0)$: the line between these points is the $x$-axis, which is inclined at $0^\circ$, not $45^\circ$.

(Double-checking the formulas in this case: $P_2 = (0,0)$, $P_3 = (2g,0)$, $P_4=(g,0)$. Yup, they work!)

(Another check: When $g=0$, we expect there to be no red arc at all, so that $P_2=P_3=P_4=(0,r)$. Yup, the formulas work there, too!)

  • $\begingroup$ The slope of the line between $P_2$ and $P_3$ happens to be $$\sqrt{1-\frac{2g}{r}}$$ which is $1$ (indicating a $45^\circ$ line) when ---and only when--- $g=0$ ... the no-little-circle-at-all case. $\endgroup$ – Blue Jul 11 '13 at 20:28
  • $\begingroup$ @JoshuaBarker: Correct: $P_4$ comes first, and then $P_2$ and $P_3$ follow. $\endgroup$ – Blue Jul 11 '13 at 21:38
  • $\begingroup$ awesome... thanks a lot... this is exactly what I needed... additional points for helping me to understand why my 45-degree assumption was wrong $\endgroup$ – Joshua Barker Jul 11 '13 at 21:50

Analytic Geometry Answer

Define $(x,y)^R=(-y,x)$ to be a quarter turn rotation. Then $$ \frac{p_1+p_2}{2}\pm(p_1-p_2)^R\sqrt{\frac{r^2}{|p_1-p_2|^2}-\frac14}\tag{1} $$ are the two centers of circles of radius $r$ passing through $p_1$ and $p_2$.

$\hspace{3.2cm}$enter image description here

Radius of Connecting Circle

Looking at your diagram, the radius of the connecting circle should not be $g$ (which is the difference of the radius of the large circle and the length of the line). The radius of the connecting circle should be $$ \frac{\sqrt{2r^2-(r-g)^2}-(r-g)}{\sqrt{2r^2-(r-g)^2}+(r-g)}(r-g)\tag{2} $$ Use $(2)$ in place of $r$ in $(1)$.


$p_1=(8,1)$, $p_2=(0,7)$, and $r=13$ gives $$ \begin{align} \frac{p_1+p_2}{2}&=(4,4)\\ (p_1-p_2)^R&=(8,-6)^R\\ &=(6,8)\\ |p_1-p_2|&=10 \end{align} $$ Plugging into $(1)$ yields $$ (4,4)\pm(6,8)\sqrt{\frac{13^2}{10^2}-\frac14} =(4,4)\pm(7.2,9.6) $$ Thus, we get the points $(11.2,13.6)$ and $(-3.2,-5.6)$.

  • $\begingroup$ I'm sorry... as I said, I'm math-illiterate, so I only get a bit of the above... how would I use this to find the x,y coordinates of the 3rd point, given that p1 and p2 are not necessarily on the same axis? Please click the link above to my diagram for a better explanation of my problem. $\endgroup$ – Joshua Barker Jul 11 '13 at 19:13

Let the points be $p_1 = (x_1, y_1)$ and $p_2 = (x_2, y_2)$ . The midpoint between them is $q = ((x_1+x_2)/2, (y_1+y_2)/2)$. The distance between them is $R = \sqrt{(x_2-x_1)^2+(y_2-y_1)^2}$.

The perpendicular bisector of the line through $p_1$ and $p_2$ is the line through $q$ with slope $d = (-dy, dx)$, where $dx = x_2-x_1$ and $dy = y_2-y_1$ .

The points on this line have coordinates $q + t d$ for real $t$.

The center of the desired circle is at distance $r$ from $p_1$ (or $p_2$).

So we want $|q+td-p_1| = r$ or $|q+td-p_1|^2 = r^2$ .

In ordinate form,

$\begin{align} r^2 &= ((x_1+x_2)/2+t(-dy)-x_1)^2 +((y_1+y_2)/2+t(dx)-y_1)^2\\ &= ((x_2-x_1)/2+t(-dy))^2 +((y_2-y_1)/2+t(dx))^2\\ &= (dx/2-t\ dy)^2 +(dy/2+t\ dx)^2\\ &= dx^2/4-dx\ t\ dy+t^2\ dy^2 +dy^2/4+dy\ t\ dx+t^2\ dx^2\\ &= t^2\ (dx^2+dy^2) + (dx^2+dy^2)/4\\ &= (dx^2+dy^2)(t^2+1/4)\\ &= R^2(t^2+1/4)\\ \text{so}\\ t^2 &= \left(\dfrac{r}{R}\right)^2-1/4 \end{align} $

There are two values of $t$ because the center can be on either side of the line connecting $p_1$ and $p_2$.

The desired center is at $q+td = ((x_1+x_2)/2-t\ dy), (y_1+y_2)/2+t\ dx) $.


Assuming arc is formed in counter-clockwise direction, get angle from center to start point relative to positive x-axis (w/ center as vertex), and same for angle from center of circle to end point of arc.

Subtract both angles, divide by 2. Once you have the half-angle, you can get midpoint M(x,y) by:

Mx = Cx + radius * cos(AngleStart + HalfAngle)
My = Cy + radius * sin(AngleStart + HalfAngle)


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.