Are there any plans to support line caps on Paths?

[Vadoola]

I thought about asking this a while back, but never did, and I was recently reminded by discussion #4656.

When I initially started work on Tomotroid I had intended to use Slint paths to make the circular progress bar. I ended up dropping that idea and switching to loading an SVG because the Slint paths don't have support for line caps (specifically rounded line caps).

While this method works, it would be nice to handle this within Slint if possible, remove some of the Rust code, and keep the UI a bit more encapsulated. Right now in order make the progress circle move smoothly I need to be having a short timer to wake up and tick over the progress SVG, or have a longer time and the progress circle moves in big ticks.

If I was able to create this progress circle within Slint I could animate the progress property and have my timer wake up less often to update the progress circle. I assume this would be more efficient resource wise, but I haven't actually tested this.

So are there any plans to bring line cap support to Slint Paths? I searched through the Issues and Discussions, and couldn't find anything about it one way or the other.

[tronical]

Yes, you're totally right, this is a desirable feature to have. I'll create an issue from this discussion.

[metehus]

I wish for this feature too. I tried around and got somewhat working, using the iot demo:

Here's the slintpad for it.
It has some issues tho, like when both points override eachother, but it works for my case right now:

[Vadoola]

That's probably not a bad solution, actually and might be worth using on my end. I would need the start and end to "overlap" at some point at 100%, but I could probably change the logic to just draw a full circle instead of the path at that point or something.

[Enyium]

With fill-rule: nonzero;, the overlap works! You used fill-rule: FillRule.evenodd; in your CircularPath.

[metehus]

ohh right! doing that fixes the issue

[Lonami]

Lifesaver! Didn't know drawing hollow circles with a fill in SVG was this difficult. Simplifying Tomotroid's implementation for a full-circle, we get:

HollowCircle

export component HollowCircle inherits Path {
    in property <float> outer-radius: 32;
    in property <float> inner-radius: 24;
    in property <float> precision: 0.00001;

    fill: gold;

    MoveTo {
        x: root.outer-radius;
    }

    ArcTo {
        radius-x: 1;
        radius-y: 1;
        x: root.outer-radius;
        y: root.outer-radius - root.inner-radius;
    }

    ArcTo {
        radius-x: root.inner-radius;
        radius-y: root.inner-radius;
        large-arc: true;
        sweep: true;
        x: root.outer-radius - root.precision;
        y: root.outer-radius - root.inner-radius;
    }

    ArcTo {
        radius-x: 1;
        radius-y: 1;
        x: root.outer-radius - root.precision;
    }

    ArcTo {
        radius-x: root.outer-radius;
        radius-y: root.outer-radius;
        large-arc: true;
        x: root.outer-radius;
    }
}

…in case someone else like me looks this up :-) Thanks @Vadoola!

[Vadoola]

That does look like a nice simplification if you don't need the progress / partial circle.

I would like to say the credit should really go to @metehus. My component in Tomotroid is mostly his work posted above in this discussion slightly modified for what I needed.