slint icon indicating copy to clipboard operation
slint copied to clipboard

Path Line Cap rendering issues

Open Vadoola opened this issue 7 months ago • 3 comments

Bug Description

  • What is the bug? Line caps on paths, don't seem to render correctly with the Qt and Winit backends.
  • What behavior did you expect, and what happened instead? Line Caps to render properly, I did notice the issue with butt and square line caps, but it seems most pronounced with round line caps (which is what I was trying to use)
  • Steps to reproduce the issue: Used the attached code. When using the WASM Preview in VSCode it works just fine, but when the exe is run the rendering issues occur. I've seen this issue on Linux (Wayland, haven't tried X11) with the Qt and Winit backend (tried winit, and winit-femtovg and saw the issue. winit-skia didn't compile, and I didn't dig into it). I was also able to reproduce it on Windows 11 with the winit backend.

See attached video to see the rendering issues.

https://github.com/user-attachments/assets/65a9e79e-6786-43fd-b5c0-55586835ff1f

Reproducible Code (if applicable)

import { VerticalBox, Slider } from "std-widgets.slint";

export component CircularProgress {
    preferred-height: 100%;
    preferred-width: 100%;
    in property <float> progress;
    in property <color> bg_color;
    in property <color> fg_color;
    in property <color> txt_color;
    in property <string> prog_text;
    in property <string> lbl_text;

    Path {
        // clamp is a workaground to get filled circle by 1.0
        private property <angle> progress: clamp(100.0 * 1turn, 0, 0.99999turn);

        viewbox-width: 1;
        viewbox-height: 1;
        height: path.height - (path.stroke-width - self.stroke-width);
        width: path.width;

        stroke-width: 2px;
        stroke: bg_color;


        MoveTo {
            x: 0.5;
            y: 0;
        }

        ArcTo {
            radius-x: path.radius;
            radius-y: path.radius;
            x: 0.5 - path.radius * sin(-(parent.progress) );
            y: 0.5 - path.radius * cos(-(parent.progress) );
            sweep: false;
            large-arc: true;
        }
    }


    path := Path {
        property <float> radius: 0.5;
        // clamp is a workaground to get filled circle by 1.0
        private property <angle> progress: clamp(root.progress * 1turn, 0, 0.99999turn);

        viewbox-width: 1;
        viewbox-height: 1;
        height: parent.height;
        width: parent.width;

        stroke-width: 10px;
        stroke: fg_color;
        stroke-line-cap: round;

        MoveTo {
            x: 0.5;
            y: 0;
        }

        ArcTo {
            radius-x: path.radius;
            radius-y: path.radius;
            x: 0.5 - path.radius * sin(-(path.progress) );
            y: 0.5 - path.radius * cos(-(path.progress) );
            sweep: true;
            large-arc: root.progress >= 0.49;
        }

        /*animate progress {
            duration: 1s;
        }*/
    }

    Timer := Text {
        font-family: "Roboto Mono";
        text: prog_text;
        color: txt_color;
        font-size: 46px;
    }
    task-label := Text {
        text: lbl_text;
        font-family: "Lato";
        y: parent.height * 0.70;
        color: txt_color;
        font-size: 12pt;
    }
}



export component Demo inherits Window {
    width: 200px;
    VerticalBox {
        alignment: start;

        progress := CircularProgress {
            height: self.width;
            //height: parent.width;
            progress: slider.value;
            bg_color: red;
            fg_color: green;
            txt_color: black;
            prog_text: ceil(slider.value * 100);
            lbl_text: "Label";
        }

        slider := Slider {
            value: 0.90;
            maximum: 1;
        }

        Timer := Timer {
            interval: 1s;
            running: true;
            triggered => {
                if slider.value <= 0 {
                    slider.value = 1;
                } else {
                    slider.value -= 0.01;
                }
            }
        }
    }
}

Environment Details

  • Slint Version: 1.10.0
  • Platform/OS: Linux (Wayland) and Windows 11
  • Programming Language: Rust
  • Backend/Renderer: Winit / Qt

Product Impact

No response

Vadoola avatar Apr 15 '25 21:04 Vadoola