0

我有一个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。现在更改移动设备的方向或将桌面上的窗口大小调整为横向。现在，我需要将 300 单位高度的 QIMage 调整为 100 单位的高度。如何设置 QIMage 的宽度和高度来很好地完成这个？我看到，当您在横向模式下查看纵向捕捉图像时，Android 上的 Google 照片通过在图像的两侧嵌入黑色来很好地做到这一点，反之亦然。我希望完全实现谷歌照片的这个功能。应该可以通过设置 Image QML 元素的正确宽度和高度来实现吗？

4

1 回答 1

1

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

绑定使对象能够自动更新其属性，以响应其他对象中的属性更改或某些外部事件的发生。

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

 parameter:  width > height ? contition_1 : condition_2

在您的情况下，我会建议根据状态使用 2 个不同的图像。在官方文档中，您可以找到一个定向观察器，旨在为绑定做您想做的事情。顺便说一句，您可以执行以下操作：

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

[更新]

作为替代方案，如果您想使用相同的图像，您可以处理Screen类的属性 Orientation。如果您适合图像大小，通过属性宽度、高度到 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;
       }
    }
}
于 2017-12-11T15:20:55.057 回答