将SVG图像的画布大小减少到QtQuick中的实际绘制大小

Question

大家好！:)

我正在开发一个QtQuickControls2应用程序，我需要缩小作为ColumnLayout一部分的SVG映像，以适应屏幕高度。这是我的代码：

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

在QtQuick中使用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

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