How do I enable antialiasing on QML Shapes?

Question

Here's a QML file that has a Dial control and a custom shape side by side:

import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.2
import QtQuick.Shapes 1.0


Window {
    id: window
    visible: true
    width: 400
    height: 200

    RowLayout {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        spacing: 5

        Dial {
            id: dial1
        }

        Control {
            id: dial2

            implicitWidth: dial1.width
            implicitHeight: dial1.height

            antialiasing: true

            Shape {
                anchors.fill: parent

                antialiasing: true

                ShapePath {
                    strokeWidth: 1
                    strokeColor: dial2.visualFocus ? dial2.palette.highlight : dial2.palette.dark

                    startX: dial2.width/2
                    startY: 0

                    PathArc {
                        x: dial2.width/2
                        y: dial2.height
                        radiusX: dial2.width/2
                        radiusY: dial2.height/2
                        direction: PathArc.Clockwise
                    }

                    PathArc {
                        x: dial2.width/2
                        y: 0
                        radiusX: dial2.width/2
                        radiusY: dial2.height/2
                        direction: PathArc.Clockwise
                    }

                }
            }
        }
    }
}

Since antialiasing: true is set on both the Control and the Shape, I would have expected the path to look smooth. However, it looks jagged:

How can I antialias the shape?

dragly · Answer 1 · 2018-11-15T17:56:05.183

27

According to the blog post about QtQuick Shapes, you need to either enable multisampling on the whole scene or on a QtQuick layer.

You appear to be using a QQmlApplicationEngine, in which case you can simply set the default surface format in main.cpp:

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QSurfaceFormat format;
    format.setSamples(8);
    QSurfaceFormat::setDefaultFormat(format);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

Alternatively, if you prefer to restrict this setting to a single QtQuick layer, you can also set the number of samples like this:

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Shapes 1.0

Window {
    visible: true
    width: 640
    height: 480

    Item {
        id: root
        anchors.fill: parent
        layer.enabled: true
        layer.samples: 4
        // your shapes here ...
    }
}

Setting it on a layer appears to be broken for me with vendorExtensionsEnabled: true on the Shape, which is the default. Setting it to false appears to work.

edited Nov 15 '18 at 17:56

answered Mar 30 '18 at 15:04

dragly

1,445
11
14

This was great input! Before, I had set the surface format on the window directly, after creating the engine. `QSurfaceFormat format; format.setSamples( 8 ); auto window = dynamic_cast( engine.rootObjects().first() ); window->setFormat( format );` However, after moving to Qt 5.12, this approach doesn't work anymore, it apparently needs to be set before the engine is instantiated. – Tobias Gurdan Jun 12 '19 at 12:10
1

I'm trying to get this working with Qt 5.15 and neither of the approaches have any effect on my Shapes :-( I also tried disabling vendor extensions as suggested, but no luck. Still jagged. – LubosD Jul 03 '20 at 13:46
@LubosD, it does work. Just a few minutes ago I've used it to improve graphics quality. see [here](https://stackoverflow.com/questions/62709212/how-to-improve-graphics-quality) – Jul 03 '20 at 15:47
@EmonHaque But you're not using any Shape/ShapePath/PathPolyline components, are you? I'm trying even the most trivial cases and still no antialiasing is taking place. – LubosD Jul 06 '20 at 21:26
@LubosD, all those icons (A, B,C, J, K and L) you see are `string` put inside `Shape{ShapePath{PathSvg{path: string}}}` – Jul 06 '20 at 21:53

score 0 · Answer 2 · answered Feb 22 '18 at 09:19

0

Have you tried enabling smooth? I would check but i am currently using Qt 4.8 for a project and do not have 5.x loaded to try it for myself.

https://doc.qt.io/qt-5.10/qml-qtquick-item.html#smooth-prop

answered Feb 22 '18 at 09:19

teh_raab

384
1
3
21

How do I enable antialiasing on QML Shapes?

2 Answers2

Linked