Top round transparent window

Question

I'm currently learning QML and I want to create a top round transparent window.

I've build something that looks like that, but it seems wrong for multiple reason.

Here's my code:

Window {
    id: app
    visible: true
    width: 70
    height: 70

    flags: Qt.Window | Qt.FramelessWindowHint | Qt.WA_TranslucentBackground

    Rectangle {

        anchors.fill: parent
        radius: parent.width / 2.0

        color: "black"

        MouseArea {
            property point clickPos: "1,1"

            anchors.fill: parent
            drag.target: parent

            onPressed: {
                clickPos  = Qt.point(mouse.x,mouse.y)
            }

            onPositionChanged: {
                var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                app.x += delta.x;
                app.y += delta.y;
            }

            onDoubleClicked: app.close()
        }
    }
}

using these flags in the main :

QQuickWindow::setDefaultAlphaBuffer(true);

QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

The main problem is that the background is not transparent.

I think it is because the 'round' rectangle is fully painted !?

I've tried multiple flags (Qt.Tool, Qt.Transparent, ...) but none works.

I was wondering if I started well to do what I want (I think I don't) and what is the best way to do it.

I've seen the clipping property for the qml item but I also see there's performance issues. I don't know if it's a good idea to use that property.

I'm running on Qt 5.10 and Win7 using MSVC as compiler.

Thank you

EDIT: Adding transparent background color to the window

Answer 1

Adding an answer, just so I can post an image to prove to you that all you need is to set the color:

Window {
    id: app
    visible: true
    width: 70
    height: 70

    flags: Qt.Window | Qt.FramelessWindowHint

    color: "#00000000"

    Rectangle {

        anchors.fill: parent
        radius: parent.width / 2.0

        color: ma.pressed ? "red" : "black"

        MouseArea {
            id: ma
            property point clickPos: "1,1"

            anchors.fill: parent
            drag.target: parent

            onPressed: {
                clickPos  = Qt.point(mouse.x,mouse.y)
            }

            onPositionChanged: {
                var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                app.x += delta.x;
                app.y += delta.y;
            }

            onDoubleClicked: app.close()
        }
    }
}

And the result:

I didn't use any of the flags you are setting from C++, maybe setDefaultAlphaBuffer() is breaking it for you.