Qt 如何在横向和横向显示QImage;保持纵横比的纵向方向&;不切断图像数据
我有一个可以在纵向或横向模式取决于它的宽度和高度。反之亦然 我正在尝试在横向模式下安装一个肖像图像&在纵向模式下安装一个横向图像而不破坏纵横比 以下是我如何尝试做到这一点:Qt 如何在横向和横向显示QImage;保持纵横比的纵向方向&;不切断图像数据,qt,qml,qtquick2,qimage,qqmlcomponent,Qt,Qml,Qtquick2,Qimage,Qqmlcomponent,我有一个可以在纵向或横向模式取决于它的宽度和高度。反之亦然 我正在尝试在横向模式下安装一个肖像图像&在纵向模式下安装一个横向图像而不破坏纵横比 以下是我如何尝试做到这一点: Window { id: app_window visible: true Rectangle { id: my_image_view_container width: my_image.sourceSize.width height: my_image.sourceSize.heigh
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_窗口从纵向调整为横向时,图像不会倾斜
问题:
但在横向模式下,如果应用程序窗口的高度小于我的图像的高度,则图像不完全可见
问题:
我应该如何设置my_image\u view\u container
和my_image
的大小,以便能够在横向和纵向两种方向上托管image.jpg
,而不破坏纵横比,也不丢失任何模式下查看图像的部分
PS:
例如,挑战是:我拍摄了一个QML快照,创建了一个宽度为100单位、高度为300单位的QImage。现在更改移动设备的方向或将桌面上的窗口调整为横向。现在,我需要把300个单位高的QIMage装进100个单位的高度。如何设置QIMage的宽度和高度以很好地实现这一点?我发现android上的Google Photos做得很好,当你在横向模式下观看肖像捕获图像时,它会在图像的两侧嵌入一个黑色,反之亦然。我希望实现谷歌照片的这一功能。应该可以通过设置图像QML元素的正确宽度和高度来实现吗?对于您的情况,您可以使用绑定根据当前像素密度和屏幕状态选择不同的图像。根据官方文件:
绑定使对象能够自动更新其属性,以响应其他对象中属性的更改或某些外部事件的发生
查看有关现代Qt的文档,我认为这非常有用。通过比较宽度和高度,您可以轻松检查屏幕的当前状态、横向或纵向情况:
parameter: width > height ? contition_1 : condition_2
在你的情况下,我会建议有2个不同的图像取决于国家。在官方文件中,你可以找到一个旨在为绑定做你想做的事情的文档。顺便说一下,你可以这样做:
Image {
source: {
if (width > height)
"image_1.png"
else
"image_2.png"
}
}
[更新]
或者,如果要使用相同的图像,可以处理类的属性方向。如果您通过属性width来调整图像大小,那么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;
}
}
}
请注意,我没有根据方向显示不同的图像。参考您的答案,如果else大小写匹配,我需要调整图像大小。不显示image_2.png
这是一个完全不同的图像,在基于屏幕的hdpi
或ldpi
图像显示时,它看起来是可以使用的。请注意,我的案例是一个非常简单的案例,能够在横向模式下显示纵向QImage或在纵向模式下显示横向QImage。这不是我想要的。我知道屏幕何时从横向变为纵向,反之亦然。挑战:比如说,你拍了一张快照,创建了一个宽100单位、高300单位的QImage。现在将方向更改为“横向”。我需要把300个单位高的QIMage装进100个单位的高度。如何做到这一点?我已经使用Screen类对答案添加了一个更新来处理当前屏幕状态的更改和更改图像的大小,您可以使用Screen.width和Screen.height来适应屏幕。