Qt/Qml雷达动画开发：如何裁剪ConicalGradient的边界

在开发雷达扫描动画时，你遇到了ConicalGradient无法正确裁剪边界的问题，尝试Shape、ShapePath组件及调整角度均未达到理想的扇形扫描效果。以下是针对该问题的解决方案：

修改后的实现代码 #

MapQuickItem {
    id: radarItem
    coordinate: QtPositioning.coordinate(someLatitude, someLongitude)
    zoomLevel: 16

    sourceItem: Item {
        id: radarContainer
        width: 1300
        height: 1300
        x: -width/2
        y: -height/2
        visible: model.state === "rx"

        // 可选：雷达外框
        Rectangle {
            anchors.fill: parent
            color: "transparent"
            radius: width/2
            border.color: "green"
            border.width: 1
        }

        // 雷达渐变效果
        ConicalGradient {
            id: radarGradient
            anchors.fill: parent
            angle: 0
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, 0) }
                GradientStop { position: 0.05; color: Qt.rgba(0, 180, 0, 0.3) }
                GradientStop { position: 0.06; color: Qt.rgba(0, 180, 0, 0) }
            }
        }

        // 扇形遮罩+旋转动画实现扫描效果
        OpacityMask {
            anchors.fill: radarGradient
            source: radarGradient
            maskSource: Shape {
                anchors.fill: parent
                ShapePath {
                    strokeWidth: 0
                    fillColor: "white"
                    // 绘制扇形路径：圆心→圆弧→圆心
                    PathMoveTo { x: radarContainer.width/2; y: radarContainer.height/2 }
                    PathArc {
                        x: radarContainer.width/2; y: 0
                        radiusX: radarContainer.width/2
                        radiusY: radarContainer.height/2
                        startAngle: 0
                        sweepAngle: 45 // 扇形角度，可按需调整
                    }
                    PathLine { x: radarContainer.width/2; y: radarContainer.height/2 }

                    // 旋转遮罩实现扫描动画
                    transform: Rotation {
                        origin.x: radarContainer.width/2
                        origin.y: radarContainer.height/2
                        NumberAnimation on angle {
                            from: 0
                            to: 360
                            duration: 1000
                            loops: Animation.Infinite
                            running: true
                        }
                    }
                }
            }
        }

        // 中心指示器
        Rectangle {
            id: radarInside
            color: model.isAttacked ? "red" : "green"
            height: 5
            width: 5
            anchors.centerIn: parent
        }
    }
}

关键实现说明 #

1. 遮罩裁剪：使用OpacityMask组件，通过Shape绘制的扇形路径作为遮罩，精确限制ConicalGradient的显示范围，解决边界裁剪问题。
2. 动画优化：旋转遮罩而非整个渐变容器，减少组件重绘开销，提升动画流畅度。
3. 渐变调整：通过调整GradientStop的位置和颜色，模拟雷达扫描的自然衰减效果，让扇形边缘过渡更柔和。
4. 中心指示器修正：将原代码中偏移的radarInside改为锚定到容器中心，确保显示位置正确。

原方案问题分析 #

原代码依赖带圆角的Rectangle加clip: true，仅能裁剪出圆形区域，但无法限制ConicalGradient的显示范围为扇形；直接使用Shape/ShapePath未结合遮罩时，无法实现渐变与裁剪区域的联动，因此达不到理想的扫描效果。

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