QML Screen Coordinates of Component

Question

If I have a simple, self-contained QML application, I can get the absolute screen coordinates of a component by saying

Component.onCompeted: {    
    var l = myThing.mapToItem(null, 0, 0)
    console.log("X: " + l.x + " y: " + l.y)
}

where myThing is the id of any other component in the file. However, if this file gets incorporated into another QML file and the component it defines is reused, I don't get the screen coordinates anymore; I get the local coordinates relative to the component where the statements above are executed.

How can I get the absolute screen coordinates of items?

Simon Warta · Accepted Answer · 2014-02-03T12:21:49.620

12

Component.onCompleted: {
    var globalCoordinares = myThing.mapToItem(myThing.parent, 0, 0)
    console.log("X: " + globalCoordinares.x + " y: " + globalCoordinares.y)
}

where myThing.parent is your main compontent.

edited Feb 03 '14 at 12:21

answered Jan 30 '14 at 21:06

Simon Warta

10,850
5
40
78

2

Unfortunately, I don't have access to the main component where this widget will be used. – Paul Carlisle Jan 31 '14 at 12:00
You're right. I tested it with `myThing.parent` which works in case the parent QML element fills the whole window. You can also use `myThing.parent.parent` if that is your root element. Not very nice and maintainable but it works. – Simon Warta Feb 02 '14 at 21:04
@PaulCarlisle, There is exist way to access different QMLs using `import`. `import "../Path/To/Parent/" as ParentOfMyThing` Then, should be available following thing: `ParentOfMyThing.someId` – Alexander Borodulya Jan 26 '15 at 15:20
The main component can be made global using dynamic scoping, just have a `property Window vroot : id_root`, then `vroot` will be available for the entire application. – dtech Sep 01 '16 at 19:28
1

`Item`s should have a `mapToGlobal` method. Further you can always access the toplevel `Item` with `ApplicationWindow.contentItem` if you use `ApplicationWindow` to create your window. I think `Window` is also an attached property to get the Window in which your Item is instantiated. (That is, nowadays. Might be different for 2014 Qt) – derM - not here for BOT dreams Aug 23 '17 at 14:17

karyon · Answer 2 · 2019-12-18T14:54:17.837

3

Since Qt 5.7, there is Item.mapToGlobal:

Component.onCompleted: {
    var globalCoordinates = mapToGlobal(0, 0)
    console.log("X: " + globalCoordinates.x + " y: " + globalCoordinates.y)
}

edited Dec 18 '19 at 14:54

answered Jul 08 '19 at 11:49

karyon

1,957
1
11
16

Unfortunately, this apparently doesn't work on delegates... – art-solopov Aug 16 '20 at 13:15

Andrew · Answer 3 · 2016-05-30T13:59:23.290

Here is a quick and very dirty solution. Note: This has only been lightly tested but so far seems to work. I would not recommend using this in production applications as it's a complete hack and likely to break at some point.

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    x: 150.0
    y: 150.0
    title: qsTr("Hello World")

    Rectangle {
        id: lolRect
        height: 50
        width: 50
        anchors.centerIn: parent;

        Component.onCompleted: {

            function getGlobalCordinatesOfItem(item) {

                // Find the root QML Window.
                function getRootWindowForItem(item) {
                    var cItem = item.parent;
                    if (cItem) {
                        return getRootWindowForItem(cItem);
                    } else {

                        // Path to the root items ApplicationWindow
                        var rootWindow = item.data[0].target;
                        if (rootWindow && rootWindow.toString().indexOf("ApplicationWindow") !== -1) {
                            return rootWindow;
                        } else {
                            console.exception("Unable to find root window!");
                            return null;
                        }
                    }
                }

                // Calculate the items position.
                var rootWindow = getRootWindowForItem(item);
                if (rootWindow) {
                    return Qt.point(rootWindow.x + lolRect.x,
                                    rootWindow.y + lolRect.y);
                } else {
                    return null;
                }
            }

            // Print the result.
            console.log(getGlobalCordinatesOfItem(this));
        }
    }
}

QML Screen Coordinates of Component

3 Answers3

Linked