Reduzierung der Leinwandgröße des SVG-Bildes auf die tatsächliche Größe in Qt Quick

Question

Hallo an alle! :)

Ich entwickle eine Qt Quick Controls 2-Anwendung, und ich muss ein SVG-Bild, das ein Teil eines ColumnLayout ist, auf die Bildschirmhöhe anpassen. Hier ist mein Code:

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

Die ursprüngliche SVG Größe ist 1200x500 und das resultierende Bild gemalt ist 300x125, die auch von paintedWidth und paintedHeight Eigenschaften angezeigt wird. Das Problem, das ich Gesicht ist, dass SVG Leinwand nicht geändert wird, verbleibende 1200x500, die andere Steuerelemente bewegt (zB das Etikett) aus dem Bildschirm:

Wie kann ich die Größe der Leinwand auf den tatsächlichen Gemalte Größe, die keine Bindeschleife verursacht?

Answer 1

Wenn SVG-Bilder in Qt Schnell verwenden, ihre sourceSize ändern ihre Elementgröße entsprechen:

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 
    } 

Die hervorgehobene Linie ändert die Leinwandgröße (Rendering).

Answer 2

Nach paintedHeight documentation:

Bei Verwendung eines Image.PreserveAspectFit oder ein Image.PreserveAspectCrop paintedWidth oder paintedHeight kann kleiner oder größer sein als die Breite und Höhe des Bildobjekts.

Die paintedHeight ist 125, weil fillMode: Image.PreserveAspectFit gesetzt ist. Die height des Bildes ist jedoch nicht festgelegt und bleibt standardmäßig auf 500 Pixel. richtige Höhe zuweisen, ohne eine Bindungsschleife verursacht, können Sie Layout.preferredHeight Eigenschaft und berechnen PreserveAspectFit selbst:

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 
}