Как отображать QImage в альбомной и портретной ориентации с сохранением соотношения сторон и без обрезания данных изображения

У меня есть QIMage, который может быть в портретном или альбомном режиме в зависимости от его < em> ширина против высоты. Или наоборот.

Я пытаюсь уместить портретный QIMage в альбомном режиме и альбомный QImage в портретном режиме без нарушения соотношения сторон.

Вот как я пытаюсь это сделать:

Window {
  id: app_window
  visible: true

  Rectangle {
    id: my_image_view_container
    width: my_image.sourceSize.width
    height: my_image.sourceSize.height

    // This is a Image item which has to host a portrait/landscape image.jpg in both portrait & landscape modes on an android device
    Image {
       id: my_image
       anchors.fill: parent
       // changes at runtime based on the image my app selects
       source: "random/path/to/an/image.jpg"
       scale: Qt.KeepAspectRatio
    }
  }
}

Это в основном работает, чтобы сохранить соотношение сторон. Изображение не искажается, когда я изменяю размер своего app_window с книжного на альбомный.

Проблема:
Но в ландшафтном режиме, если высота app_window меньше высоты my_image, изображение не полностью видно.

Вопрос:
Как мне установить размер my_image_view_container & my_image, чтобы иметь возможность выполнять хостинг image.jpg как в альбомной, так и в портретной ориентации, не нарушая соотношение сторон, а также не пропуская для просмотра частей изображения в любой режим?

PS:
Проблема, например: Я беру снимок QML и создаю QImage, который имеет ширину 100 единиц на высоту 300 единиц. Теперь измените ориентацию мобильного устройства или измените размер окна на рабочем столе на альбомный. Теперь мне нужно уместить QIMage, высота которого составляет 300 единиц, на высоту 100 единиц. Как установить ширину и высоту QIMage, чтобы это было удобно? Я вижу, что Google Фото на Android прекрасно справляется с этим, вставляя черный цвет с обеих сторон изображения, когда вы просматриваете снимок портретной съемки в ландшафтном режиме и наоборот. Я хочу добиться именно такой функциональности Google Фото. Должно быть возможно, установив правильную ширину и высоту элемента Image QML?


qt qml qtquick2 qqmlcomponent qimage
person TheWaterProgrammer    schedule 11.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В вашем случае вы можете использовать привязки, чтобы выбрать другое изображение в зависимости от текущей плотности пикселей и состояния экрана. Согласно официальному документу:

Привязка позволяет объектам автоматически обновлять свои свойства в ответ на изменение атрибутов в других объектах или возникновение какого-либо внешнего события.

Проверьте документацию по масштабируемости в современном Qt, я думаю, это может быть действительно полезно . Вы можете легко проверить текущее состояние экрана, альбомную или портретную, сравнив ширину и высоту:

 parameter:  width > height ? contition_1 : condition_2

В вашем случае я рекомендую иметь 2 разных изображения в зависимости от состояния. В официальном документе вы можете найти Orientation Observer, цель которого - делать то, что вы хотите для привязки. Кстати, можно сделать примерно так:

Image {
   source: {
      if (width > height)
        "image_1.png"
      else
        "image_2.png"
    }
}

[ОБНОВЛЕНИЕ]

В качестве альтернативы, если вы хотите использовать то же изображение, вы можете обработать свойство Orientation Screen класс. Если вы соответствуете размеру изображения с помощью свойства width, height для свойств Screen.width и Screen.height должно быть достаточно. Если вы планируете использовать собственный код, то:

Image {
    id: image
    source: "image.jpg"
    width: whatever
    height: whatever 
    fillMode: Image.PreserveAspectFit
    anchors.top: parent.top

    Screen.onOrientationChanged: {
       if (Screen.primaryOrientation === Qt.PortraitOrientation) {
          image.width = 300;
          image.heigh = 100; 
       } else {
          image.width = 100;
          image.heigh = 300;
       }
    }
}
person mohabouje    schedule 11.12.2017
comment
Обратите внимание, что у меня нет отображения разных изображений в зависимости от ориентации. Ссылаясь на ваш ответ, мне нужно изменить размер image_1.png, если еще совпадет регистр. Не отображать image_2.png, который полностью отличается от изображения - person TheWaterProgrammer; 11.12.2017
comment
Qt Scalability, похоже, можно использовать при отображении hdpi или ldpi изображения на основе на Screen.PixelDensity. Обратите внимание, что в моем случае очень простой случай отображения портретного QImage в альбомном режиме или альбомного QImage в портретном режиме - person TheWaterProgrammer; 11.12.2017
comment
Это не то, что я ищу. Я знаю, когда экран меняется с альбомного на портретный и наоборот. Задача: Допустим, вы сделали снимок и создали QImage, который имеет ширину 100 единиц на высоту 300 единиц. Теперь измените ориентацию на альбомную. Мне нужно уместить QIMage, высота которого составляет 300 единиц, на высоту 100 единиц. Как это сделать? - person TheWaterProgrammer; 11.12.2017
comment
Я добавил обновление к ответу, используя класс Screen для обработки изменения текущего состояния экрана и изменения размеров изображения. Вы можете использовать Screen.width && Screen.height, чтобы соответствовать экрану. - person mohabouje; 11.12.2017