圆角脏角不光滑

Question

我有简单的圆角矩形，但像 4 边或像用 radius: width/2 画圆形一样，4 个角不光滑。我添加了一些效果，如高斯模糊，但无法处理。我尝试使用贝塞尔曲线，但遇到了一些问题。如您所见，这些图像的角落显然很脏。

拐角（不光滑）：

另一边（平滑）：

Window {
    id: window
    width: 401
    height: 400
    visible: true
    
    color: 'gray'   

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

    Rectangle{
        id: rec
        x: 90
        y:150

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

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

        radius: 10
        layer.enabled: true

    }
    GaussianBlur {
        anchors.fill: rec
        source: rec
        radius: 2
        samples: 30
        deviation: 1
        clip: true
    }

}

我的建议是（用 Adobe Illustrator 绘图）：

Answer 1

这只是正常的抗锯齿播放。运行 Rectangle 中带有 antialiasing: false 的代码将导致锯齿状边缘而不是模糊边缘：

在光栅化（将数学形状转换为像素）中，锯齿和模糊之间总是存在权衡。当用于具有更复杂形状的应用程序时，这将不再明显！

有关此主题的更多信息，关键字为：光栅化、锯齿化、抗锯齿。

这是它在没有模糊边缘但有别名的情况下工作的最小示例：

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle{
        id: rec
        x: 90
        y:150
        antialiasing: false
        color: 'transparent'
        border.color: "#262626"
        border.width: 1

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

        radius: 10
        layer.enabled: true

    }
}

Answer 2

使用这些链接可以帮助：

How do I enable antialiasing on QML Shapes?

https://doc.qt.io/archives/qt-5.9/qml-qtquick-pathsvg.html

Using SVG curves to imitate rounded corners

SVG rounded corner

但我最推荐使用 qNanoPainter 你可以在 c++ 中绘制任何带有模糊的窄线并在 qml 中调用它。

圆角脏角不光滑

Dirty corners of round rectangle not smooth

qt

canvas

qml