QML 旋转图像未填充容器

Question

我正在使用 QML 尝试显示图像。我有以下代码：


Rectangle {
  id: border
  anchors {
    top: parent.top; 
    topMargin: vpx(20); 
    right: parent.right;
  }
  color: "black"
  z: 6
  width: 500
  height: 750
            
  Image {
    id: picture
    width: parent.width
    height: parent.height
    transformOrigin: Item.Center
    rotation: (implicitWidth/implicitHeight > 1.3) ? 270 : 0
    anchors.fill: border
    fillMode: Image.PreserveAspectFit
    source: ".../pic.png"
  }

如果旋转设置为 0，它会正确缩放以填充矩形。如果旋转设置为 270，它不会填充矩形 - 它旋转正确，但在两个方向上都在矩形内。它应该扩大更多。

为什么会这样？

编辑：上面的代码已经过编辑。以上所有代码都在一个更大的矩形内。此代码的目的是在图像宽度 > 高度时将图像旋转 90 度。当旋转设置为0时（即高度>宽度不需要旋转），图片显示如下第一种情况。当设置为270（即width > height，需要旋转）时，图片显示如下图第二种情况。我希望它能与第一张填满宽度的图片相媲美，据我所知，“fillMode: Image.PreserveAspectFit”应该有效。

黑色是矩形，红色是图像。

Answer 1

这有点棘手，但你可以试试这个方法：

Rectangle {
    id: border
    anchors {
        top: parent.top;
        right: parent.right;
    }
    color: "black"
    z: 6
    width: 500
    height: 750

    Item {
        id: pictureItem
        transformOrigin: Item.Center
        rotation: (picture.implicitWidth/picture.implicitHeight > 1.3) ? 270 : 0
        anchors.centerIn: parent
        width: rotation == 270 ? parent.height : parent.width
        height: rotation == 270 ? parent.width : parent.height

        Image {
            id: picture
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            source: ".../pic.png"
        }
    }
}

我准备了两张测试图：

这就是我用上面的代码块得到的结果：

QML 旋转图像未填充容器

QML Rotated Image not Filling Container

scaling

qt

image

qml