slint
slint copied to clipboard
Path Line Cap rendering issues
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