在Qt中將SVG圖像的畫布大小降低爲實際繪製的大小快速

Question

大家好！ :)

我正在開發一個Qt快速控制2應用程序，我需要縮小一個SVG圖像是一個ColumnLayout的一部分，以適應屏幕高度。這裏是我的代碼：

Page { 
    title: "About" 

    ColumnLayout { 
     anchors.fill: parent 
     spacing: 20 

     Image { 
      id: app_logo 
      source: "images/app_logo.svg" 
      mipmap: true 
      Layout.maximumWidth: Math.min(parent.width, 300) 
      Layout.alignment: Qt.AlignHCenter | Qt.AlignTop 
      verticalAlignment: Qt.AlignTop 
      fillMode: Image.PreserveAspectFit 
     } 

     Label { 
      text: "Version 0.1" 
      font.pointSize: 15 
      Layout.fillWidth: true 
      horizontalAlignment: Qt.AlignHCenter 
     } 
    } 
} 

原來SVG大小1200x500，所得塗圖像300x125，這也是由paintedWidth和paintedHeight屬性顯示。我所面臨的問題是，SVG的畫布上沒有變化，其餘1200x500，其移動其他控件（如標籤）從屏幕：

如何設置畫布大小實際畫大小不會導致綁定循環？

Answer 1

當Qt Quick的使用SVG圖像，改變他們的sourceSize以滿足他們的項目大小：

Image { 
     id: app_logo 
     source: "images/app_logo.svg" 
     mipmap: true 
     Layout.maximumWidth: Math.min(parent.width, 300) 
     Layout.alignment: Qt.AlignHCenter | Qt.AlignTop 
     verticalAlignment: Qt.AlignTop 
     sourceSize: Qt.size(width, height) //important 
    } 

突出顯示的行更改了畫布（渲染）大小。

Answer 2

根據paintedHeight documentation：

當使用Image.PreserveAspectFit或Image.PreserveAspectCrop paintedWidth或paintedHeight可以比寬度和圖像項目的高度更小或更大。

的paintedHeight是125，因爲fillMode: Image.PreserveAspectFit設置。但是，圖像的height未設置，並且默認情況下仍保持爲500像素。要分配正確的高度，而不會造成裝訂圈，你可以自己設置Layout.preferredHeight特性，算出PreserveAspectFit：

Image { 
    id: app_logo 
    source: "images/app_logo.svg" 
    mipmap: true 
    Layout.maximumWidth: Math.min(parent.width, 300) 
    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop 
    verticalAlignment: Qt.AlignTop 

    //PreserveAspectFit 
    Layout.preferredHeight: (width/sourceSize.width) * sourceSize.height 
}