Hello, been searching a lot but have not found a s...

# compose

[Alejandro Rios]

Hello, been searching a lot but have not found a solution for this:

I have this clue square in Canvas, and I want to draw a border that works as a progress, as you see on the image, the border progress works (orange line), but I want that line move in the same direction as the red line (made by hand 😅 ), code is on 🧵

[Alejandro Rios]

Untitled.kt

Untitled.kt

[Alejandro Rios]

This code is based on this stackoverflow answer
https://stackoverflow.com/a/75747893

[romainguy]

That looks good to me, what's the issue?

[romainguy]

(i would just remove the clip(path) part, not sure why you need that?)

[romainguy]

Is it that it starts by going down? To fix this you need to build a path with a different order for its points. If you are using addRoundRect you can choose the winding, just pick Clockwise

[romainguy]

(although it's something we may have added in compose 1.7 only)

[Alejandro Rios]

The issue is that I want to make the orange line start from top left and move to top right then bottom right , etc, now is moving from top left to bottom left

[romainguy]

Right so either use compose 1.7 and use the clockwise winding direction

[romainguy]

Or build the rounded rect yourself using lineTo/cubicTo

[Alejandro Rios]

Noob question here: why the rounded rect have to change? Should it be the pathWithProgress?

[romainguy]

Because the path has a direction. The progress is a distance from the origin along the path

[romainguy]

You could try to use negative values see if it works

[romainguy]

But I wouldn't rely on that

[romainguy]

I don't think we ever defined a meaning for negative values so there would be no compatibility guarantees

[Alejandro Rios]

Ok, will try your suggestions, thanks