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

Question

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

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

Answer 1

简短的回答

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

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

更长的答案

正如 indalive 所暗示的，映射坐标的首选方法是使用mapToItem, 可用于任何项目。它将坐标（和大小）从当前项目坐标系统（如果没有另外指定）转换到另一个项目坐标系统。而mapFromItem对方自然而然地反其道而行之。

从 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)
    }
}

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

• 你的离你的左上角MouseArea很近root，稍微远一点Window
• 窗口本身距屏幕最左侧 1000 像素以上

... 你会看见：

对于根：QPointF(10, 0)

对于窗口：QPointF(150, 100)

对于系统：QPointF(1230, 120)

警告Window类型

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

Answer 2

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

下面的函数将找到鼠标区域的绝对位置。然后您可以相应地添加 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;
  }
}

Answer 3

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

Answer 4

如果您检查鼠标区域中 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