Question

我使用QML显示背景图片，此图片需要用图标覆盖。这些项目中的每一项都附加一个MouseArea，因此图标实际上用作按钮。

现在图标需要缩放并与背景图像一起移动。他们的布局行为需要使图标看起来好像是背景图像的一部分（我没有将图标包含在背景图像中，因为图标是＆＃34;活动＆＃34;并且与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() }
            }
        }
    }

}

知道出了什么问题？

谢谢，

安托。

Answer 1

不要忘记这一刻：

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

来自俄罗斯的干杯：）

QML自定义布局

1 个答案: