QML 星形进度条：星形路径裁剪与自底向上填充

星形进度条把进度做成「给五角星上色」——五角星轮廓是固定的，进度决定填充高度，从底部往上填，填到哪进度就到哪。这种形式在评分、能量、成就进度这类场景里很合适，比普通线性进度条更有视觉趣味。QML 用 Canvas 画星形路径做裁剪，再用 fillRect 从底部往上画填充矩形，星形轮廓把填充限制在五角星形状内。

Demo 星形进度条

两种星形进度条同屏排开：渐变星形（黄到橙渐变 + 描边）、旋转星形（紫到深紫渐变 + 外光晕 + 旋转动画），底部一根滑杆统一控制进度。

涉及的核心知识点：

• 用三角函数算五角星十个顶点
• 星形路径做裁剪区域
• 底色与进度填充分层
• 渐变填充让进度有层次
• 星形整体旋转动画
• 外圈光晕用半透明实心圆

以下演示代码来自 qml_progress/Demo_StarBar.qml，为便于阅读，只展示了关键代码。

演示代码

FadeInAnimation {
    ColumnLayout {
        anchors.fill: parent
        anchors.marg