Qt QML自定义布局

我正在使用QML显示背景图像，该图像需要用图标覆盖。每个项目都附有一个鼠标earea，因此图标实际上用作按钮

现在图标需要与背景图像一起缩放和移动。它们的布局行为需要使图标看起来像是背景图像的一部分（我没有将图标包括在背景图像中，因为图标是“活动的”，并且与MouseArea关联）

我得到的行为是，图标与背景图像缩放良好（当图像调整大小时，图标会相应地重新缩放），这非常好。现在不幸的是，图标的位置x/y不正确，我没有管理“查找x/y公式”，以便图标与背景一起移动，并调整大小，让人感觉图标是背景图像的一部分

这是我目前的代码：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3

Rectangle
{
    color: palette.grey

    // Manual move background and buttons.
    Image
    {
        id: robotBody
        fillMode: Image.PreserveAspectFit
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width
        height: parent.height * 0.8
        source: "../UI/Pictures/ManualMove_body.png"
        smooth: true

        // Buttons.
        Image
        {
            id: xFrontButton
            fillMode: Image.PreserveAspectFit
            source: "../UI/Icons/ManualMove_XFront.png"
            smooth: true
            x: 0.8 * parent.paintedWidth
            y: 0.8 * parent.paintedHeight
            transformOrigin: Item.TopLeft
            width: implicitWidth * robotBody.paintedWidth / robotBody.implicitWidth
            // NOTE: no need to specify the height because of the preserve aspect ratio fill mode.

            MouseArea
            {
                id: xFrontMouseArea
                anchors.fill: parent
                hoverEnabled: true
                onPressed: { uiController.onXFrontMouseAreaPressed() }
                onReleased: { uiController.onXFrontMouseAreaReleased() }
            }
        }
    }

}

知道出了什么问题吗

谢谢

---

安托万。

别忘了这一刻：

x: (parent.width - parent.paintedWidth)/2 + 0.8 * parent.paintedWidth
y: (parent.height - parent.paintedHeight)/2 + 0.8 * parent.paintedHeight

即，这样做：

import QtQuick 2.0
//import QtQuick.Controls 2.0
//import QtQuick.Controls.Styles 1.4
//import QtQuick.Controls.Material 2.0
//import QtQuick.Layouts 1.3

Rectangle
{
//    color: palette.grey
    color: "grey"

    // Manual move background and buttons.
    Image
    {
        id: robotBody
        fillMode: Image.PreserveAspectFit
        anchors.top: parent.top
        anchors.topMargin: 10
//        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width
        height: parent.height * 0.8
//        source: "../UI/Pictures/ManualMove_body.png"
        source: "Large.png"
        smooth: true

        // Buttons.
        Image
        {
            id: xFrontButton
            fillMode: Image.PreserveAspectFit
//            source: "../UI/Icons/ManualMove_XFront.png"
            source: "small.png"
            smooth: true
            x: (parent.width - parent.paintedWidth)/2 + 0.8 * parent.paintedWidth
            y: (parent.height - parent.paintedHeight)/2 + 0.8 * parent.paintedHeight
//            transformOrigin: Item.TopLeft
            width: implicitWidth * robotBody.paintedWidth / robotBody.implicitWidth
            // NOTE: no need to specify the height because of the preserve aspect ratio fill mode.

            MouseArea
            {
                id: xFrontMouseArea
                anchors.fill: parent
                hoverEnabled: true
                onClicked: console.log("Heya!")
//                onPressed: { uiController.onXFrontMouseAreaPressed() }
//                onReleased: { uiController.onXFrontMouseAreaReleased() }
            }
        }
    }
}

---

来自俄罗斯的欢呼声：）

我添加了一些我自己的自定义图像进行测试，将它们命名为大的和小的+残疾的东西，这在我的Qt 5.5中是不必要或不可用的。嗨，mlvljr，你知道吗？你摇滚：一切都很好！现在我不知道为什么需要这样做：如果transformOrigin是图像的中心，我希望需要（parent.width-parent.paintedWidth）/2，但实际上我已经明确地将其更改为transformOrigin:Item.TopLeft，只是为了避免添加这个（parent.width-parent.paintedWidth）/2。如果我必须添加这段代码，那没关系，只是我不明白为什么我必须…谢谢，原因是，你实际上没有在这里转换任何东西（即没有旋转或smth），只是通过好的旧x、y、w、h定位项目，然后，所有的x和y值都是从左到上，w和h拉伸到右和下——我们没有其他方法来处理这个问题，将图像粘贴到另一个案例的顶部，除了找到父图像的可见部分从左到上的偏移（假设在保持纵横比的情况下，物体看起来是垂直和水平居中的——我们得到了我们的位置：）。简而言之，变换是另一回事，但基本坐标系非常简单（并且只有（0,0）s作为原点）。感谢mlvljr，这真的很有帮助！