QML中实现圆角矩形内移动矩形的精准裁剪问题

问题根源 #

使用父容器的clip: true时，裁剪逻辑基于轴对齐的矩形边界，而非父容器的实际圆角形状，导致橙色进度条移动到边缘时，圆角被裁成直角。而MultiEffect的遮罩功能无法正确关联遮罩源的位置与形状，因此无法解决该问题。

解决方案：使用OpacityMask实现精确形状裁剪 #

Qt Quick提供的OpacityMask组件可基于遮罩源的Alpha通道（即实际视觉形状）裁剪内容，完美适配圆角容器的裁剪需求，无需调整进度条宽度。

修改后的完整代码：

Rectangle {
    id: bg
    color: "black"
    width: 120; height: 8; radius: 4; x: 100; y: 50

    // 包裹进度条的容器，仅作为遮罩源载体，设置为不可见
    Item {
        id: barContainer
        anchors.fill: parent
        visible: false

        Rectangle {
            id: bar
            color: "orange"
            width: 60; height: 8; radius: 4

            NumberAnimation on x {
                running: true
                from: -(bar.width * 1.2)
                to: bg.width * 1.2
                loops: Animation.Infinite
                duration: 1000
            }
        }
    }

    // 使用背景作为遮罩，裁剪进度条的显示区域
    OpacityMask {
        anchors.fill: parent
        source: barContainer
        maskSource: bg
    }
}

代码说明 #

1. 移除父容器的clip属性：不再依赖矩形边界裁剪
2. barContainer容器：承载移动的橙色进度条，与背景同大小，设置为不可见避免直接显示
3. OpacityMask组件：
   • source指定要裁剪的内容（即移动的进度条）
   • maskSource指定裁剪形状（即黑色圆角背景）
   • 最终显示效果为：进度条仅在背景的圆角区域内可见，移动到边缘时会贴合圆角形状，不会出现直角裁剪。

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