QML自定義佈局

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

} 

什麼錯誤的任何想法？

謝謝，

安託萬。

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

乾杯:)