QML custom layout

Question

Я использую QML для отображения фонового изображения, и это изображение должно быть наложено значками. Каждый из этих элементов прикреплен MouseArea, поэтому значки фактически используются как кнопки.

Теперь значки должны масштабироваться и перемещаться вместе с фоновым изображением. Их поведение в макете должно быть таким, чтобы значки выглядели так, как будто они были частью фонового изображения (я не включил значки в фоновое изображение, потому что значки «активны» и связаны с 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() } 
      } 
     } 
    } 

} 

Любая идея о том, что происходит не так?

Thanks,

Antoine.

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

Приветствия из России :)