Search code examples
rustslint

How do I make half a circle in Slint?

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

Solution

  • I was able to figure this out by using Path, especially the AcrTo command

    The 100% is 3/4 of a circle

    Output demo

    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;
            }
        }
    }
}