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