How do I find edge points on an arc given radius, sweep and start angle

Question

I'm trying to draw an arc with rounded edges in one of my project, but i'm having hard time figuring out Math to draw the rounded edged on an arc.

this is what I have so far

val size = Size(500, 250)
val xOrigin = size.width / 2f
val height = size.height
val stroke = 60
val outerRadius = size.width / 2f
val innerRadius = outerRadius - stroke
val startAngle = -180f
val sweep = 45f
val center = Offset(xOrigin, height)

based on above information i was able to figure out I was able to draw two rectangles and to achieve the arc below. My question is how do I find x,y points of the edges (one circled in black) or x,y points of the corners start point (the one in second arc with rounded red corner). So that I can draw a path from those two points to make an arc?

Any help is appreciated. Thank you in advance.

// rectangle 1

Rect(
  left = center.x - outerRadius,
  top = center.y - outerRadius,
  right = center.x + outerRadius,
  bottom = center.y + outerRadius,
),
startAngle ,
sweep

// rectangle 2

Rect(
  left = center.x - innerRadius,
  top = center.y - innerRadius,
  right = center.x + innerRadius,
  bottom = center.y + innerRadius,
),
startAngle + sweep ,
- sweep

I drew both of this rect using Path and acrTo function provided by canvas library in Jetpack compose to achieve the red arc in the image.

Answer 1

Let's assume that the 'curved rectangle' is defined by two circles centered at the origin with radii: (inner) $r_1$ , and (outer) $r_2$, and the angle at which the rectangle is cut is $\theta$, as measured from the positive $x$ axis.

Let the radius of the circle to be cut out be $r$, then all you need is to find the center of this circle. Consider the corner of the 'curved rectangle' close to the inner circle which of radius $r_1$. Let $A$ be the point

$ A = (r_1 + u ) (\cos \theta, \sin \theta ) $

From $A$ go to point $B$ (The center of the cut-out circular arc) given by

$ B = ( (r_1 + u) \cos \theta - r \sin \theta, (r_1 + u) \sin \theta + r \cos \theta ) $

Now you want the distance between $B$ and the origin to be $ r_1 + r $.

Thus

$(r_1 + r)^2 = (r_1 + u)^2 + r^2$

Simplifying

$2 r_1 r = 2 r_1 u + u^2$

And this is a quadratic equation in $u$ which can be solved by quadratic formula. Namely,

$ u = \left(\dfrac{1}{2} \right) ( - 2 r_1 + \sqrt{ 4 r_1^2 + 8 r_1 r } ) $

Simplifying the above expression, we get

$ u = - r_1 + \sqrt{ r_1^2 + 2 r_1 r } $

Having found $u$, the center of the cut-out circular arc (point $B$) is now known.

Point $A$ is the start of the arc, and point $C$ is the end of the arc, where

$C = \dfrac{ r_1 }{ r_1 + r } B $

For the corner at $r_2$, point $A$ is

$ A = (r_2 - u ) (\cos \theta, \sin \theta ) $

And point $B$ is

$ B = ( (r_2 - u) \cos \theta - r \sin \theta, (r_2 - u) \sin \theta + r \cos \theta ) $

Therefore, the equation determining $u$ becomes

And the solution is

$ u = r_2 - \sqrt{ r_2^2 - 2 r r_2 }$

with this, point $B$ (the center ) is detemined, and point $C$ (the end point on the outer circle is given by

$ C = \dfrac{r_2}{r_2 - r} B $

The above is valid if chamfering counter clockwise from the straight edge. If chamfering the other end (clockwise), then point $A$ is the same, but $B$ becomes

$ B = ( (r_1 + u) \cos \theta + r \sin \theta, (r_1 + u) \sin \theta - r \cos \theta ) $

for $r_1$ corner , and

$ B = ( (r_2 - u) \cos \theta + r \sin \theta, (r_2 - u) \sin \theta - r \cos \theta ) $

for $r_2$ corner.

$C$ formulas are the same.

For example, take the 'curved rectangle' with inner radius $5 cm$ and outer radius $10 cm$, and let $\theta = 60^\circ $ and $r = 1 cm$

The below figure shows the application of the above formulas. The curved rectangle is shown in black while the cut-out circular arc is shown in red.