javascript QML 鼠标在 MouseArea 中的绝对位置

QML mouse absolute position in MouseArea

提问by user14416

How to get the absolute mouse position from the mouse area ? I need to have it to show a popup a the correct position

如何从鼠标区域获取绝对鼠标位置？我需要让它显示一个弹出窗口的正确位置

Item {
    Menu {
        id: menu
        MenuItem {
            onTriggered: {
               // Need Mouse absolute position
            }
        }
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            menu.popup()
        }
    }

采纳答案by Blastings

You probably found the answer already, but I'll put my solution here for others looking for the same thing.

您可能已经找到了答案，但我会将我的解决方案放在这里供其他人寻找相同的东西。

The below function will find the absolute position of the mouse area. And then you can add mouseX and mouseY accordingly to get mouse position.

下面的函数将找到鼠标区域的绝对位置。然后你可以相应地添加 mouseX 和 mouseY 来获取鼠标位置。

Item {
  Menu {
    id: menu
    MenuItem {
      onTriggered: {
        var absolutePos = getAbsolutePosition(source);
        // Need Mouse absolute position
      }
    }
  }
  MouseArea {
    id: mouseArea
    anchors.fill: parent
    onClicked: {
      menu.popup()
    }
  }
  function getAbsolutePosition(node) {
      var returnPos = {};
      returnPos.x = 0;
      returnPos.y = 0;
      if(node !== undefined && node !== null) {
          var parentValue = getAbsolutePosition(node.parent);
          returnPos.x = parentValue.x + node.x;
          returnPos.y = parentValue.y + node.y;
      }
      return returnPos;
  }
}

回答by indalive

In this case mouseArea fills his parent (anchors.fill: parent), therefore mouseArea.mouseX and mouseArea.mouseY are absolute mouse position. For relative positions you should use mapFromItem and mapToItem functions http://doc.qt.io/qt-5/qml-qtquick-item.html#mapToItem-method

在这种情况下， mouseArea 填充他的父级（anchors.fill: parent），因此 mouseArea.mouseX 和 mouseArea.mouseY 是绝对鼠标位置。对于相对位置，您应该使用 mapFromItem 和 mapToItem 函数http://doc.qt.io/qt-5/qml-qtquick-item.html#mapToItem-method

回答by Adrien Leravat

Short answer

简答

• Map to/from another Item: mapToItem, mapFromItem
• Map to/from global (from Qt 5.7): mapToGlobal, mapFromGlobal

• 映射到/从另一个项目：mapToItem，mapFromItem
• 映射到/全球（从Qt的5.7）： mapToGlobal，mapFromGlobal

    onClicked: {
        var positionInPopup = mapToItem(popup, mouse.x, mouse.y)
    }

Longer answer

更长的答案

Like hinted by indalive, the preferred method for mapping coordinates is by using mapToItem, available for any Item. It transforms coordinates (and size) from current Item coordinates system (if not specified otherwise) to another Item coordinates system. And the mapFromItemcounterpart does the reverse, naturally.

就像 indalive 暗示的那样，映射坐标的首选方法是使用mapToItem，可用于任何项目。它将坐标（和大小）从当前项目坐标系统（如果没有另外指定）转换为另一个项目坐标系统。而mapFromItem对方正好相反，自然。

From Qt 5.7, you also have mapToGlobal, which will give you coordinates in the system/screen referential.

从 Qt 5.7 开始，您还有mapToGlobal，它将为您提供系统/屏幕参考中的坐标。

MouseArea {

    // ...

    onPositionChanged: {
        var positionInRoot = mapToItem(root, mouse.x, mouse.y)
        var positionInWindow = mapToItem(window.contentItem, mouse.x, mouse.y)
        var globalPosition = mapToGlobal(mouse.x, mouse.y)

        console.log("For root: " + positionInRoot )
        console.log("For window: " + positionInWindow)
        console.log("For system: " + globalPosition)
    }
}

Given the example above, and ...

鉴于上面的例子，和...

• your MouseAreais close to root, a bit further from your Windowtop left corner
• the Window itself is 1000px+ from the leftmost of your screen(s)

• 你离你的左上角MouseArea很近rootWindow
• 窗口本身距离屏幕最左侧 1000px+

... you will see:

... 你会看见：

For root: QPointF(10, 0)

For window: QPointF(150, 100)

For system: QPointF(1230, 120)

对于根：QPointF(10, 0)

对于窗口：QPointF(150, 100)

对于系统：QPointF(1230, 120)

Caveat with Windowtype

警告Window类型

When converting to/from a Window(QML type), you need to use its contentItemproperty, as mapTo/From only work with Items.

与Window（QML 类型）相互转换时，您需要使用其contentItem属性，因为 mapTo/From 仅适用于Items。

回答by Deadron

If you check the documentation for the onClicked signal in Mouse Area(http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#onClicked-signal) you are given a MouseEvent param named mouse. Using the MouseEvent object(http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mouseevent.html) you can access the mouse positions inside the onClick handler with

如果您检查鼠标区域中 onClicked 信号的文档（http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#onClicked-signal），您将获得一个名为的 MouseEvent 参数老鼠。使用 MouseEvent 对象（http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mouseevent.html），您可以访问 onClick 处理程序内的鼠标位置

mouse.x
mouse.y