如何在Slint中制作半圆？需实现0-100%参数化圆弧组件

要制作能通过参数（0%到100%）切换无圆弧、1/4圆、半圆、整圆的组件，仅靠Rectangle的border-radius无法实现部分圆弧，推荐使用Qt Quick Shape或Canvas来实现，两种方案如下：

方案一：用Shape + PathArc（声明式风格） #

利用ShapePath的PathArc组件，通过参数控制圆弧的扫过角度，实现从0%到100%的过渡：

import QtQuick 2.15
import QtQuick.Shapes 1.15

Item {
    // 控制圆弧进度：0.0=无圆弧，0.25=1/4圆，0.5=半圆，1.0=整圆
    property real progress: 0.0
    property int lineWidth: 4
    property color lineColor: "black"
    // 组件整体尺寸（宽高一致）
    property int size: 240

    Shape {
        anchors.fill: parent
        ShapePath {
            strokeWidth: lineWidth
            strokeColor: lineColor
            fillColor: "transparent"

            // 圆弧起点（圆心）
            startX: size / 2
            startY: size / 2

            PathArc {
                // 圆弧终点：通过三角函数计算对应进度的坐标
                x: size/2 + (progress < 1.0 ? Math.cos(Math.PI * 2 * progress) * size/2 : size/2 + 1)
                y: size/2 + Math.sin(Math.PI * 2 * progress) * size/2
                // 圆弧半径
                radiusX: size / 2
                radiusY: size / 2
                // 扫过角度：进度*360度
                sweepAngle: progress * 360
                // 进度超过50%时启用大弧，避免画反向小弧
                largeArc: progress > 0.5
            }
        }
    }

    // 0%时显示一个点代替无圆弧
    Rectangle {
        visible: progress === 0.0
        width: lineWidth
        height: lineWidth
        radius: lineWidth / 2
        color: lineColor
        anchors.centerIn: parent
    }
}

方案二：用Canvas（灵活绘制） #

如果需要更复杂的绘制逻辑（比如渐变、阴影），Canvas是更灵活的选择：

import QtQuick 2.15

Item {
    property real progress: 0.0
    property int lineWidth: 4
    property color lineColor: "black"
    property int size: 240

    Canvas {
        anchors.fill: parent
        onPaint: {
            const ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = lineColor;

            const centerX = size / 2;
            const centerY = size / 2;
            // 半径减去线宽一半，避免线条超出组件边界
            const radius = (size / 2) - (lineWidth / 2);

            if (progress === 0.0) {
                // 0%时绘制一个点
                ctx.beginPath();
                ctx.arc(centerX, centerY, lineWidth / 2, 0, Math.PI * 2);
                ctx.fillStyle = lineColor;
                ctx.fill();
            } else {
                // 从顶部（12点钟方向）开始绘制圆弧
                const startAngle = -Math.PI / 2;
                const endAngle = startAngle + Math.PI * 2 * progress;
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                ctx.stroke();
            }
        }

        // 参数变化时触发重绘
        onProgressChanged: requestPaint()
        onLineWidthChanged: requestPaint()
        onLineColorChanged: requestPaint()
        onSizeChanged: requestPaint()
    }
}

使用示例 #

在主界面中调用组件，通过progress参数控制圆弧状态：

ArcComponent {
    progress: 0.5 // 半圆
    size: 240
    lineWidth: 4
    lineColor: "black"
}

内容的提问来源于stack exchange，提问作者Ruslan