QML mousearea布局

Question

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

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

图像具有属性 fillMode：Image.PreserveAspectFit ，这样可以在调整窗口大小时很好地缩放图像。

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

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

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

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

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的行为。

--------- --------- UPDATE

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

我是否知道如何正确调整布局大小？

亲切的问候，

安托。

Answer 1

我认为出现问题是因为渲染图像在UIImage *image = [UIImage renderImageFromView:view withRect:view.bounds transparentInsets:UIEdgeInsetsZero]; 项范围内的实际位置随着父级尺寸的变化而变化。你可以看看我的意思，如果你用你最喜欢的编辑器打开图像，并填写背景，例如红色。

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

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