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

Question

大家好！ :)

我正在开发 Qt Quick Controls 2 应用程序，我需要缩小作为 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 的 canvas 没有改变，剩下 1200x500，这会将其他控件（例如标签）移出屏幕：

如何将 canvas 大小设置为实际绘制的大小而不导致绑定循环？

Answer 1

根据paintedHeight documentation：

When using an Image.PreserveAspectFit or an Image.PreserveAspectCrop paintedWidth or paintedHeight can be smaller or larger than width and height of the Image item.

paintedHeight 为 125，因为设置了 fillMode: Image.PreserveAspectFit。但是image的height没有设置，默认还是500px。要在不引起绑定循环的情况下分配正确的高度，您可以设置 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
}

Answer 2

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

突出显示的行更改 canvas（渲染）大小。

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

Reducing canvas size of SVG image to the actual painted size in Qt Quick

qt

svg

canvas

qtquick2