QML 鼠标区域布局

Question

我目前正在 QML / QtQuick 中设置一个 QUI 应用程序。

我的 GUI 由一个包含 png 图像的页面组成。此图显示了用户应按下以触发某些应用程序行为（即上/下/左/右）的箭头。

图像具有 fillMode: Image.PreserveAspectFit 属性，这允许图像在调整窗口大小时很好地缩放。

现在为了捕捉事件，我在箭头上方设置了一些 MouseAreas。尽管它们没有与窗口调整大小一起正确调整大小，但它们的行为很好。这就是我尝试过的任何布局摆弄，MouseAreas 不会停留在箭头之上（这显然对用户无用）。

在下图中，您可以看到设计的布局，png 图像显示车辆和箭头（它们是由于按下时移动车辆），鼠标区域正确地覆盖了箭头。

在图像上，我们可以看到调整窗口大小后的布局。 png 图像的大小已正确调整（考虑到保留的方面和所有内容），但 MouseAreas 未正确移动和调整大小，因此它们不再覆盖箭头。

我已尝试使用锚选项设置我的布局。然后我尝试手动计算 MouseAreas 的 x、y、width 高度（参见下面的示例代码），但没有任何效果。

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 600
    height: 600
    title: qsTr("Hello World")

    Rectangle {
        id: rectangle1
        anchors.fill: parent
        color: "#222222"

        Image {
            id: backBack
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            source: "ManualMove_allButBackgroundAndCore.png"
            smooth: true

            MouseArea {
                id: z_up
                x: 483 / backBack.implicitWidth * backBack.width
                y: 222 / backBack.implicitHeight * backBack.height
                width: 100
                height: 120
                hoverEnabled: true
                onPressed: {
                    console.log("z_up pressed width.")
                }
                onReleased: {
                    console.log("z_up released.")
                }
            }

            Rectangle {
                id: rectangle2
                x: 483 / backBack.implicitWidth * backBack.width
                y: 222 / backBack.implicitHeight * backBack.height
                width: 100
                height: 120
                color: "#ffffff"
            }
        }
    }
}

矩形允许在运行应用程序时可视化 MouseArea 的行为。

---------更新---------

我添加了一个example file 来表明我的意思。我希望白色矩形与蓝色箭头一起移动和调整大小（因此白色矩形始终位于左侧蓝色箭头上）。

知道如何正确调整布局大小吗？

亲切的问候，

安托万。

Answer 1

我认为出现问题是因为渲染图像在Image 项目范围内的实际位置随着其父项大小的变化而变化。如果你用你最喜欢的编辑器打开图像并用例如填充背景，你就会明白我的意思。红色。

您也许可以通过使用Item 自己做方面的事情来解决这个问题，但我认为您处理这个问题的方式有点倒退。图像中应该具有交互性的每个“形状”都应该有自己的单独 PNG 文件，然后用其中的几个组成一个场景。这样，您只需在Image 上设置MouseArea 设置anchors.fill，而不必担心实际渲染图像的位置。您可以创建一个包含Image 和MouseArea 组合的可重用MyButton.qml，然后根据需要创建它的实例。作为奖励，它们将更加灵活，因为您可以轻松应用例如按下/悬停效果。

您可能仍希望使用与现在相同的缩放来定位这些图像。