Qt Quick中圆角矩形边角不光滑，高斯模糊、贝塞尔曲线均无法解决怎么办？

问题原因 #

• Qt Quick默认的Rectangle组件在细边框、小半径圆角场景下如果未开启抗锯齿，边缘会自然出现锯齿
• 你添加的layer.enabled: true属性会将组件渲染到离屏纹理，反而降低渲染精度，搭配参数不合理的GaussianBlur效果还会加重边缘脏污的问题
• 1px宽度的边框容易出现半像素对齐问题，进一步加重边缘发虚、锯齿的情况

解决步骤 #

1. 移除不必要的layer.enabled属性和GaussianBlur效果，不需要额外模糊就能实现光滑圆角
2. 给Window或者Rectangle组件手动开启抗锯齿
3. 微调矩形的位置偏移0.5像素，让1px边框对齐物理像素，避免发虚

修改后可用代码 #

Window {
    id: window
    width: 401
    height: 400
    visible: true
    color: 'gray'   
    // 全局开启抗锯齿
    antialiasing: true

    Slider{
        id: slider
        from: 1
        to: 5
        onValueChanged: console.log("value :"+value)
    }

    Rectangle{
        id: rec
        // 偏移0.5像素对齐物理像素，解决1px边框发虚问题
        x: 90.5
        y: 150.5

        color: 'transparent'
        border.color: "#262626"
        border.width: 1

        width: Math.round(parent.width * .5)
        height: Math.round(width*.6)

        radius: 10
        // Qt 6+可单独给当前矩形开启抗锯齿，Qt 5只开全局的即可
        antialiasing: true
    }
}

如果以上方案还是达不到你需要的渲染精度，可以改用Qt Quick的Shape组件自定义绘制圆角路径，它的矢量渲染精度比原生Rectangle更高，完全可以达到Adobe Illustrator绘制的光滑圆角效果。

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