CODEWITHSUNDEEP
qtlayoutqmlqtquick2qt-quick
arennuit
arennuit

Reputation: 927

QML custom layout

I am using QML to display a background image and this image needs to be overlaid by icons. Each of these items is attached a MouseArea so the icons are actually used as buttons.

Now the icons need to scale and move together with the background image. Their layout behavior need to be such that the icons look as if they were part of the background image (I did not include the icons into the background image because the icons are "active" and are associated the MouseArea).

The behavior I get is that the icons scale well with the background image (when the image is resized, the icons are rescaled accordingly) which is great. Now unfortunately the position x / y of the icons is not correct, I do not manage the find the formula for x /y such that the icons are moved together with the background resize and give the feeling that the icon are part of the background image.

Here is my current code:

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

}

Any idea of what is going wrong?

Thanks,

Antoine.

Upvotes: 1

Views: 900

Answers (1)

mlvljr
mlvljr

Reputation: 4161

Don't forget this moment:

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

I.e. do this:

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

Cheers from Russia :)

Upvotes: 1

Related Questions