Is there any way to join lines with arcs creating a radius I

Question

Is there any way to join lines with arcs creating a radius It seems to be possible to join straight lines but I have two arcs that need to join two lines I ve tried to solve the problem mathematically and calculating exactly where the corner arcs should go and what start and sweep angles they should have but that is proving to be quite difficult The shape I m going for is what s marked with the red dots in this image There needs to be a radius on those corners <https i imgur com pvzMByH png>

romainguy · Answer

You want the intersection of lines with the arcs to have 4 rounded corners

romainguy · Answer

I m not entirely sure what it would look like since there s no guarantee the dashes will intersect at those points

romainguy · Answer

Do you have a mock of the final result

Jonny · Answer

4 rounded corners at the position of the red dots yes

Jonny · Answer

Yes give me a second

Jonny · Answer

Jonny · Answer

Something like this This is actually my current preview but the radiuses aren t exact They are mathematically wrong even though it looks sort of fine

Jonny · Answer

I did this by placing the corner arcs myself

Jonny · Answer

I would like to avoid that if possible since it was far more mathematically intense than I anticipated and the final solution is still incorrect

romainguy · Answer

Aaah I see ok not what I was expecting

romainguy · Answer

So there is a way give me one second

romainguy · Answer

romainguy · Answer

I don t think we ve exposed this in Compose but you can grave the `nativeCanvas` and an `android graphics Paint` to achieve this

romainguy · Answer

You set a `CornerPathEffect` on the `Paint` as a `PathEffect`

romainguy · Answer

You might even be able to combine it with the `DashPathEffect` using <https developer android com reference android graphics ComposePathEffect>

romainguy · Answer

That way you just draw an arc using a `ComposePathEffect` containing a `DashPathEffect` + `CornerPathEffect`

romainguy · Answer

if this doesn t work you can use <https developer android com reference android graphics Paint getFillPath android graphics Path 20android graphics Path >

romainguy · Answer

to get a fill `Path` that s your arc with the dashes

romainguy · Answer

then you draw that with the `CornerPathEffect`

Jonny · Answer

I tried something similar I believe I used canvas drawOutline as per this post <https www geeksforgeeks org create polygons with rounded corners in android using jetpack compose >

Jonny · Answer

It wont join the arcs properly When I read the cornerPathEffect documentation it says that it joins line segments not arc segments

romainguy · Answer

It works on sharp angles

romainguy · Answer

It has nothing to do with lines vs arcs

romainguy · Answer

So it should work on the dashes

Jonny · Answer

Ok I m getting a weird result with it Would it be possible to show an example of how you propose to do it I ve been trying for many days already

romainguy · Answer

Try the `getFillPath` approach I mentioned

Kirill Grouchnikov · Answer

Are you asking how to create a path for each one of these green pieces

Jonny · Answer

Yes

Kirill Grouchnikov · Answer

Connecting the straight segments to the curved segments

Jonny · Answer

Exactly

Jonny · Answer

I ll send you what I have at the moment Not sure how to best combine drawWithCache and still be able to use a canvas to access drawOutline ```androidx compose foundation Canvas modifier = modifier then Modifier size 500 dp drawWithCache val paths = mutableListOf lt Path gt val outerRadius = min size width size height 2 val currentThickness = thickness outerRadius val currentCornerRadius = cornerRadius outerRadius val sweepAng = 2 PI indicatorCount gapAng toFloat for idx in 0 until indicatorCount val ang = idx indicatorCount toFloat 2 PI PI 2 gapAng 2 + 2 PI indicatorCount toFloat val path = Path path arcToRad Rect outerRadius + currentThickness outerRadius + currentThickness outerRadius currentThickness outerRadius currentThickness translate outerRadius outerRadius ang sweepAng false path arcToRad Rect outerRadius outerRadius outerRadius outerRadius translate outerRadius outerRadius ang sweepAng sweepAng false path close paths add path onDrawWithContent drawIntoCanvas canvas gt paths forEach path gt canvas drawOutline outline = Outline Generic path paint = Paint apply color = colors backgroundColor pathEffect = PathEffect cornerPathEffect currentCornerRadius ```

Jonny · Answer

This looks like this <https i imgur com TVEibyh png>

romainguy · Answer

You don t need to build all those segments yourself

romainguy · Answer

You can dash a circle arc to get the segments

Jonny · Answer

The joins aren t working when I draw my arcs but they work when they are lines

romainguy · Answer

You only need to build them if you want to create the rounded corners yourself

Jonny · Answer

I don t understand dash

romainguy · Answer

Drawing a path with dashes

romainguy · Answer

That s what you are doing

Jonny · Answer

Ah Yes that s true

romainguy · Answer

So hopefully you can just dash the arc + apply the corner effect

romainguy · Answer

And if that doesn t work then you ll have to do the math

romainguy · Answer

there is potentially another way but I don t know whether it ll work well

Jonny · Answer

So I would just have 2 ovals and when I draw them I somehow apply a dash effect along with the corner effect

romainguy · Answer

No just 1 oval

romainguy · Answer

You stroke that oval with a dash effect + corner radius effect

Jonny · Answer

Oh I see

romainguy · Answer

which you can combine using the compose effect I linked to above

romainguy · Answer

And if composing the effects doesn t work

romainguy · Answer

you can use `Paint getFillPath` to get your dashed oval as a path meant to be filled

romainguy · Answer

and you can apply the corner effect to that

Kirill Grouchnikov · Answer

Here s a diagram that shows how to find the center of an arc that connects a straight segment to a circular arc

Kirill Grouchnikov · Answer

Point H lies 10 away from AB and when you center the connecting arc of radius 10 in it it will connect to the larger arc BC preserving the tangent continuity

Kirill Grouchnikov · Answer

In case you decide to go fully custom

Kirill Grouchnikov · Answer

You ll need to do this same technique for each one of the four corners of each segment

Jonny · Answer

Thanks a lot I will look into that solution in case the automatic method fails Much cleaner than what I was trying to do

Jonny · Answer

What throws me off as well is that it s not just one shape with 4 corners but a circle of them so that has to be accounted for

Kirill Grouchnikov · Answer

Sure in this case your big arc BC stays the same but your line AB is different so when you draw that parallel line FG to find the intersection with the smaller arc ED your FG moves as well

romainguy · Answer

Note you also need to build only 1 of those shapes

romainguy · Answer

if you build it as a `Path` you can just use a canvas rotation to draw it all around your circle

Kirill Grouchnikov · Answer

The idea is the same you draw a line X units away from your straight line and a circle X units aways from your circular arc The intersection will give you the center point of the connecting arc

romainguy · Answer

or use a `PathDashPathEffect` to stamp it along the arc

Jonny · Answer

I was thinking of that as well Romain That s probably much simpler than doing it with sin and cosine yourself

Jonny · Answer

I m trying that now Romain slightly smiling face

romainguy · Answer

watch this

romainguy · Answer

romainguy · Answer

I go through demos of all those Path APIs

romainguy · Answer

start around 18 46

romainguy · Answer

Exmaple

romainguy · Answer

Screenshot 2023 02 10 at 10 09 43 AM png

romainguy · Answer

it s called `stampedPathEffect` in Compose

romainguy · Answer

actually now that I think about it

romainguy · Answer

maybe you don t need any fancy math You could try to use `stampedPathEffect` with a simple rounded rect using the `morph` stamp effect

romainguy · Answer

it might do what you want the corners might be morphed but if your radius is not too big it might not be noticeable

Kirill Grouchnikov · Answer

And this is for connecting the other side It works both ways with the same line FG once with a smaller arc and once with a large arc

Kirill Grouchnikov · Answer

There are some longish Youtube videos on these general engineering drawing problems under the name of tangent problems

Kirill Grouchnikov · Answer

in case you want to have full control of the visuals

Jonny · Answer

Thank you that might come in handy

Jonny · Answer

By the way < romainguy> this does not apply any radius ```drawPath path = path brush = SolidColor colors backgroundColor style = Stroke currentThickness pathEffect = PathEffect chainPathEffect PathEffect dashPathEffect floatArrayOf 50f 20f PathEffect cornerPathEffect 20f ```

romainguy · Answer

Try the stampedPathEffect + rounded rect + morph then

romainguy · Answer

And if that still doesn t work do what Kirill showed you + stampedPathEffect

Jonny · Answer

< Kirill Grouchnikov> I m looking into your solution now Still don t understand how you re supposed to get the X position of H in the first image Sure Y is easy enough at 10 but how do you get X Do you have to find the intersection of FG with the arc

Jonny · Answer

And will the sweep angle of this arc always be 90 degrees

Jonny · Answer

I saw your previous message now So it s a line to circle intersection computation

Kirill Grouchnikov · Answer

Yes it s that That part is easy since Y is fixed It s going to get a bit more complex to determine the start angle and arc span for the connector

Kirill Grouchnikov · Answer

If you go down that road you have two straight segments two big arcs outer and inner and four connector arcs Each one needs to be quite specific on its start end so that it all feels like one continuous shape

Jonny · Answer

If the arcs are always 90 degrees I believe I could find the points for the bigger arcs

Kirill Grouchnikov · Answer

I don t think they are going to be 90 degrees It s slightly less for the outer corners and slightly more for the inner ones

Kirill Grouchnikov · Answer

In both cases D is slightly to the right of H

Jonny · Answer

Alright Well this is a lot trickier than it should be

Kirill Grouchnikov · Answer

I d say it s the usual amount of math for custom paths

Jonny · Answer

Should be possible to just join segments with a radius

Jonny · Answer

Idk Our iOS developer hade a path joining option which seemed to do the trick

Jonny · Answer

I m thinking of only drawing the corner arcs

Jonny · Answer

Closing the path with lines

Jonny · Answer

with path close

Jonny · Answer

Then cutting the paths with 2 large circle paths

Jonny · Answer

or clipping rather

Jonny · Answer

I still need to know the sweep angle of the corner arcs though so nevermind

romainguy · Answer

Did you try the stamped path idea with a round rect

Jonny · Answer

< romainguy> I did not as I didn t quite understand it plus you seemed unsure that it would work or give an accurate result

Jonny · Answer

Right now I m working on the line to circle intersection I think I may be able to figure out the proper start angle and sweep angle after that

romainguy · Answer

So the idea is you create a Path that contains a round rect

romainguy · Answer

Then you draw the oval with a stamped path effect that uses that round rect

romainguy · Answer

If you set the stamp style to morph the rounded rect will bend to follow the oval and be repeated along the oval

Jonny · Answer

Interesting I m worried that it wont bend appropriately to create the desired corners however

romainguy · Answer

It will bend appropriately but it might be too much and distort the corners Worth a try though

Jonny · Answer

Yeah I might try it eventually Kind of commited to the path solution for the moment though

Jonny · Answer

Thanks for the suggestion

Jonny · Answer

I ve started to apply < Kirill Grouchnikov>s solution but still very early stages Got some debugging lines and found the H point of intersection for the bottom left arc yellow dot

Kirill Grouchnikov · Answer

Upload your images here so that they can be zoomed without going to an external site

Jonny · Answer

There

Kirill Grouchnikov · Answer

Going to be easier to see what s up if you do larger sizes for the segments Once you have those done you can then do the smaller ones

Jonny · Answer

Sorry missed your message Yes that s true and I realized it on my own The radius is a bit larger now Also I successfully created the first arc

Kirill Grouchnikov · Answer

Nice

Jonny · Answer

I added extension methods for calculating dot product angle between vectors intersections etc After I had the center I then found the two corners of the arc The top left one was simply set to the circle center radius The bottom one I calculated by line to arc intersection Then I pointed a vector to the right side of the circle from the center and calculated the angle to the bottom most point for the start angle Then I calculated the angle between the two blue points as the sweep angle

Jonny · Answer

Does it seem accurate

Kirill Grouchnikov · Answer

Seven more pieces to go smiley

Jonny · Answer

I believe 5 The lines are created when the path is closed

Kirill Grouchnikov · Answer

Close goes from the last point to the first It doesn t close all the jumps in the middle

Jonny · Answer

Yes I thought so but closing two arcs will add lines at the sides

Kirill Grouchnikov · Answer

Wouldn t really save you much since you need to compute the first point coordinates in any case

Jonny · Answer

Yes I m thinking that maybe there is some time saving possibilities elsewhere though

Jonny · Answer

The inner arc angle should be the same for the other corner right

Jonny · Answer

And inner sweep angle is just sweep angle angle to top left blue circle 2

Jonny · Answer

I feel like drawing the next two parts could be quite simple in that case

Kirill Grouchnikov · Answer

The inners are identical The outers are identical too

Jonny · Answer

My logic should work then right

Jonny · Answer

Instead of doing all of this complicated math again I could do simple angle subtraction for the inner large circle and re use the other sweep angle for the corner

ephemient · Answer

the math isn t that bad I think

ephemient · Answer

image png

ephemient · Answer

my first attempt was garbage but the problem was my assumption that angles go counter clockwise they don t just had to swap a bunch of things around and then it was fine

Jonny · Answer

Very nice < ephemient> I ve been bashing my head against this problem for close to a week and you manage to come up with a quite simple solution in no time If you don t mind I will use your solution The code is clean too

ephemient · Answer

go for it the code s not that clean but it should be easy enough to tweak to whatever you need