I am trying to make a quarter/half/full circle component that will change based on parameters. Ideally percentage 0 being no circle and 100 is full
I was able to make a full circle by using a rectangle and setting border radius
Rectangle {
width: 240px;
height: 240px;
border-radius: 240px / 2;
border-color: black;
border-width: 4px;
}
But I don't see how I'd be able to create a non full one this way
Spinner
is close but it's missing a lot of customization
I was able to figure this out by using Path
, especially the AcrTo
command
The 100% is 3/4 of a circle
export component Demo {
in property <float> progress: 100%;
Rectangle {
width: 240px;
height: 240px;
path := Path {
stroke: red;
stroke-width: 16px;
private property <float> radius: min(self.viewbox-width, self.viewbox-height) / 2 + 10;
private property <float> start-x: self.viewbox-width / 2;
private property <float> start-y: self.viewbox-height / 2;
private property <float> mod: 30;
private property <float> progress: min(0.9999, root.progress);
viewbox-width: 100;
viewbox-height: 100;
width: 100%;
height: 100%;
MoveTo {
x: start-x + radius * sin(360deg);
y: start-y + radius * cos(360deg);
}
ArcTo {
radius-x: path.radius;
radius-y: path.radius;
x: start-x + path.radius * sin(-(path.progress) * 270deg);
y: start-y + path.radius * cos(-(path.progress) * 270deg);
sweep: path.progress > 0;
large-arc: path.progress > 0.7;
}
}
}
}