QML custom layout - qt

Question

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.

Answer 1

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 :)