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 (т.е. ширина> высота, требуется поворот), изображение отображается как во втором случае ниже. Я хотел бы, чтобы оно было сопоставимо с первым изображением, которое заполняет ширину, как я понимаю, "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"
        }
    }
}

Я подготовил два тестовых изображения:

And this is what I get with above chunk of code:

введите описание изображения здесь