在Qt Quick中将SVG图像的画布大小减小到实际绘制的大小

Question

大家好！ ：）

我正在开发一个Qt Quick Controls 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 时，paintWidth或paintedHeight可以小于或大于Image项的宽度和高度。

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
}