Как сделать полукруг в Slint?
Я пытаюсь создать компонент четверти/половины/полного круга, который будет меняться в зависимости от параметров. В идеале процент 0 — это отсутствие кружка, а 100 — заполнено.
Мне удалось сделать полный круг, используя прямоугольник и установив радиус границы.
Rectangle {
width: 240px;
height: 240px;
border-radius: 240px / 2;
border-color: black;
border-width: 4px;
}
Но я не понимаю, как я смогу таким образом создать неполный вариант.
Spinner близко, но не хватает многих настроек
Ты имеешь в виду кусок пирога? Я думаю, вам придется его как-то обрезать, но, похоже, для начала более подходящим будет путь Releases.slint.dev/0.2.5/docs/rust/slint/docs/builtin_elements/…
Ответы 2
Вы можете настроить процентный параметр, чтобы отображать различные части круга от 0% до 100%.
// Main.slint
import { Path, Rectangle, SlintLength, linear_gradient, Color, degrees } from slint;
component PartialCircle {
input property <float> percentage: 100;
Rectangle {
width: 240px;
height: 240px;
Path {
width: 100%;
height: 100%;
stroke: black;
stroke-width: 4px;
fill: transparent;
# Calculate the angle based on the percentage
let angle = (percentage / 100.0) * 360.0;
# Calculate end point using trigonometry
let end_x = 120.0 + 120.0 * cos(degrees(angle - 90));
let end_y = 120.0 + 120.0 * sin(degrees(angle - 90));
d: [
"M 120 0",
"A 120 120 0",
if angle > 180 { "1" } else { "0" }, "1", end_x + " " + end_y
];
}
}
}
Прямоугольник действует как контейнер. Элемент Path рисует дугу. «М 120 0» перемещается в верхнюю середину круга. «A 120 120 0» задает радиус дуги. Флаги и конечные точки управляют внешним видом и протяженностью дуги.
кажется, это хороший ответ, но, похоже, он не работает на slintpad.com
@Руслан, если честно, это похоже на то, что LLM перепутал Slint, Rust и SVG и придумал # для комментариев.
Мне удалось это выяснить, используя Path, особенно команду AcrTo.
100% — это 3/4 круга.
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;
}
}
}
}
Путь подойдет