如何在保持宽高比且不切断图像数据的情况下跨横向和纵向显示 QImage

Question

我有一个 QIMage 可以处于纵向或横向模式，具体取决于它的宽度与高度。或相反亦然。

我正在尝试在横向模式下适应纵向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 快照并创建了一个 100 单位宽 x 300 单位高的 QImage。现在更改移动设备的方向或将桌面上的 window 调整为横向。现在，我需要将 300 个单位高度的 QIMage 装入 100 个单位的高度。如何设置QIMage的宽高来很好的做到这一点？我看到 Google Photos on android 通过在横向模式下查看人像拍摄图像时在图像的两侧嵌入黑色来很好地做到这一点，反之亦然。我希望实现 Google Photos 的这个功能。应该可以通过设置图像 QML 元素的正确宽度和高度来实现吗？

Answer 1

对于您的情况，您可以使用绑定根据当前像素密度和屏幕状态选择不同的图像。根据官方文档：

Binding enables objects to automatically update their properties in response to changing attributes in other objects or the occurrence of some external event.

查看现代 Qt 中关于 Scalability 的文档，我认为这真的很有用。您可以通过比较宽度和高度轻松查看屏幕的当前状态，横向或纵向情况：

 parameter:  width > height ? contition_1 : condition_2

对于您的情况，我会建议根据州使用 2 张不同的图片。在官方文档中，您可以找到一个 Orientation Observer 旨在执行您想要的绑定操作。顺便说一句，你可以这样做：

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

[更新]

作为替代方案，如果您想使用相同的图像，您可以处理 Screen class 的属性方向。如果您适合图像大小，通过属性宽度、高度到 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;
       }
    }
}

如何在保持宽高比且不切断图像数据的情况下跨横向和纵向显示 QImage

How to display a QImage across landscape & portrait orientations with aspect ratio maintained & not cutting off image data

qt

qml

qtquick2

qimage

qqmlcomponent