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          


        

Answer 1

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.

Answer 2

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