如何知道旋轉項目的邊界矩形

Question

說，我有一個Flickable與Image裏面的某個地方。我需要相應地更新contentWidth和contentHeight。儘管可以手動進行適當的計算，但是我想知道是否有辦法獲得Image（以及其他Item）的邊界矩形？

EDIT（響應於Mitch's suggestion）：

乍一看它看起來像真棒例子。我甚至開始認爲我在嘗試使用Item.childrenRect屬性組時錯過了一些東西......不幸的是，修改了提供的示例以便邊界圍繞兒童項目繪製，我再次確信childrenRect的屬性不要重視物品的旋轉。請看下圖：

import QtQuick 2.3 
import QtQuick.Controls 1.2 

Item { 
    width: 400 
    height: 400 

    Component.onCompleted: addChildItem() 

    function addChildItem() { 
     var rect = Qt.createQmlObject("import QtQuick 2.3; Rectangle {}", container); 
     rect.x = Math.random() * 200; 
     rect.y = Math.random() * 200; 
     rect.width = 64 * slider.value; 
     rect.height = 64 * slider.value; 
     rect.color = "green"; 
     rect.opacity = 0.5; 
     rect.rotation = Math.random() * 360; 
    } 

    Row { 
     anchors.horizontalCenter: parent.horizontalCenter 
     anchors.bottom: parent.bottom 

     Slider { 
      id: slider 
      value: 0.5 

      Text { 
       text: "Child item size" 
       anchors.horizontalCenter: parent.horizontalCenter 
       anchors.bottom: parent.top 
      } 
     } 

     Button { 
      text: "Add child item" 
      onClicked: addChildItem() 
     } 
    } 

    Item { 
     id: container 
     x: 50 
     y: 50 
    } 

    Item { 
     x: container.x 
     y: container.y 
     Rectangle { 
      x: container.childrenRect.x 
      y: container.childrenRect.y 
      width: container.childrenRect.width 
      height: container.childrenRect.height 
      color: "transparent" 
      border.color: "black" 
     } 
    } 
} 

Answer 1

childrenRect應該給你考慮到旋轉邊界矩形，但有一個錯誤：childrenRect doesn't take transformations into account.

---

原來的答覆：

使用childrenRect：

import QtQuick 2.3 
import QtQuick.Controls 1.2 

Item { 
    width: 400 
    height: 400 

    Component.onCompleted: addChildItem() 

    function addChildItem() { 
     var rect = Qt.createQmlObject("import QtQuick 2.3; Rectangle {}", container); 
     rect.x = Math.random() * 100; 
     rect.y = Math.random() * 100; 
     rect.width = 64 * slider.value; 
     rect.height = 64 * slider.value; 
     rect.color = "green"; 
     rect.opacity = 0.5; 
     rect.rotation = Math.random() * 360; 
    } 

    Row { 
     anchors.horizontalCenter: parent.horizontalCenter 
     anchors.bottom: parent.bottom 

     Slider { 
      id: slider 
      value: 0.5 

      Text { 
       text: "Child item size" 
       anchors.horizontalCenter: parent.horizontalCenter 
       anchors.bottom: parent.top 
      } 
     } 

     Button { 
      text: "Add child item" 
      onClicked: addChildItem() 
     } 
    } 

    Item { 
     id: container 
     anchors.centerIn: parent 
    } 

    Text { 
     text: "Total rotated bounds" 

     Rectangle { 
      id: boundsRect 
      width: container.childrenRect.width 
      height: container.childrenRect.height 
      anchors.top: parent.bottom 
      color: "transparent" 
      border.color: "black" 
     } 
    } 
}