QtQuick实现图片查看器
介绍
图片查看器是非常值得新手入门QtQuick的项目,通过该项目,用户可以很快熟悉QML语法和资源文件存储,还可以使用通过操作文件夹实现多图像查看。
实战
首先打开QtCreator,创建QtQuick项目,我使用的是Qt6.5版本,但是其他版本应该也可以。
我们先新建一个QML文件,命名为ImageView.qml,代码如下:
import QtQuick
import QtQuick.Controls
Item {
Image{
id: image_view
source: "图片路径"
anchors.fill: parent
}
}
然后我们在Main文件中引用它:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("ImageViewer")
ImageView {
anchors.fill: parent
}
}
此时我们发现,图片被拉伸填充满整个画面,这使得原图变得失真,我们可以通过设置Image的fillModel来改变图片的填充显示格式,可取值如下:
Model | 作用 |
---|---|
Image.Stretch | 图片拉伸自适应;(默认的) |
Image.PreserveAspectFit | 按比例缩放,不裁剪 |
Image.PreserveAspectCrop | 均匀缩放,必要时裁剪 |
Image.Tile | 像贴瓷砖一样 |
Image.TileVertically | 水平拉伸,垂直平铺 |
Image.TileHorizontally | 垂直拉伸,水平平铺 |
Image.Pad | 原始图像不做处理 |
我们将图像的fillMode值设置为 Image.PressveAspectFit,这样图像就能按比例适应窗口了。
ImageView.qml
import QtQuick 2.12
Item {
Image {
id: image_view
source: "图片路径"
anchors.fill: parent
fillMode: Image.PreserveAspectFit //设置图片填充模式
}
}
但是我们只能静态地显示图片,不能在运行后动态的更改图片,这时,我们可以添加事件,打开文件窗口来选择我们要显示的图片。
首先我们定义一个文件对话框FileDiaolg
FileDialog {
id: image_dialog
nameFilters: ["(*.jpg)","(*.png)"]
onAccepted: {
image_view.source = selectedFile
}
}
它可以打开文件系统选择文件,nameFilters属性用于指定文件系统中显示的文件类型,当用户点击文件后,会触发Accepted事件,通过处理这个事件,我们将选定的文件地址(selecteFile)赋值给image_view的source,这样image_view的图片源就会改变。
我们创建一个菜单组件,添加MenuItem用于打开这个文件对话框,添加鼠标右击事件来弹出这个对话框
Menu {
id: image_menu
MenuItem{
text: "打开图片"
onTriggered: {
image_dialog.open() // 触发打开文件对话框事件
}
}
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton; //允许接收左键和右键
onClicked: function(mouse){
if(mouse.button === Qt.RightButton){ // 如果按下右键,触发事件
image_menu.popup()
}
}
}
这样,一个基本的图片查看器就完成了,不过这样还不够,我们还能添加一些简单的图片编辑功能,比如放大、缩小.
后续更新...
所有代码:
ImageView.qml
import QtQuick 2.12
import QtQuick.Dialogs
import QtQuick.Controls
Item {
property alias source: image_view.source
Image {
id: image_view
source: "图片路径"
anchors.fill: parent
fillMode: Image.PreserveAspectFit
}
FileDialog {
id: image_dialog
nameFilters: ["(*.jpg)","(*.png)"] //指定显示的文件类型
onAccepted: {
image_view.source = selectedFile
}
}
Menu {
id: image_menu
// visible: false
MenuItem{
text: "打开图片"
onTriggered: {
image_dialog.open() // 触发打开文件对话框事件
}
}
MenuItem{
text: "放大"
onTriggered: {
}
}
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton; //允许接收左键和右键
onClicked: function(mouse){
if(mouse.button === Qt.RightButton){ // 如果按下右键,触发事件
image_menu.popup()
}
}
}
}
Main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("ImageViewer")
ImageView {
anchors.fill: parent
}
}
标签:QtQuick,查看器,image,source,import,Image,图片
From: https://www.cnblogs.com/runtimeerror/p/18223365