qgraphicsview保存为图片_基于图形视图框架打造一个简单的图片浏览器（linux版本）

最新推荐文章于 2024-03-21 10:10:44 发布

weixin_39792472

最新推荐文章于 2024-03-21 10:10:44 发布

阅读量971

点赞数 2

文章标签： qgraphicsview保存为图片 qimage加载bmp图片 qt label显示图片 qt qgraphicsview显示图片一个图片在另一个图片定位左上角想让jcombobox显示图片要重写ui吗

前言

想在项目中添加一个图片浏览的模块，本来想法是想将图片显示在一个label中，然后通过过滤事件实现旋转，缩放和平移功能的。然鹅，事情远没有我想的那么容易实现(可能因为我是个渣渣。。。)，所以，我不得不换一个思路了。嘻嘻，找到了图形视图框架Graphics View。非常简单的就实现了我的想法。赞！

图形视图框架

图形视图(Graphics View)提供了一个平台，用于大量自定义2D图元的管理与交互，并提供了一个视图部件(view widget)来显示可以缩放和旋转的图元。主要由场景、视图和图形项三部分组成，这三部分分别由QGraphicsScene、QGraphicsView和QGraphicsItem这三个类来表示。多个视图可以查看一个场景，场景中包含各种各样几何形状的图形项。

- 场景类：QGraphicsScene类

场景类主要完成的工作包括提供对它包含的图元的操作接口和传递事件、管理各个图元的状态(如选择和焦点处理)、提供无变换的绘制功能(如打印)等。

- 视图类：QGraphicsView类

QGraphicsView是可滚动的窗口部件，可以提供滚动条来浏览大的场景。如果需要使用OpenGL，则可以使用QGraphicsView::setViewport()将视图设置为QGLWidget。

- 图元类：QGraphicsItem类

它是场景中各个图元的基类，在它的基础上可以继承出各种图元类，Qt已经预置的包括直线(QGraphicsLineItem)、椭圆(QGraphicsEllipseItem)、文本图元(QGraphicsTextItem)、矩形(QGraphicsRectItem)等。

- 坐标系

场景坐标
场景坐标是所有图元的基础坐标系统。场景坐标系统描述了顶层的图元，每个图元都有场景坐标和相应的包容框。场景坐标的原点在场景中心，坐标原点是x轴正方向向右，y轴正方向向下。如下图所示。

2.视图坐标
视图坐标是窗口部件的坐标。视图坐标的单位是像素。QGraphicsView视图的左上角是(0,0)，x轴正方向向右，y轴正方向向下。如下图所示。

软件设计

软件：qtcreate
平台：虚拟机或者ARM平台

OK，概念部分就介绍这么些了！图形视图框架包含的东西很多，这里只挑用到的部分介绍，其他的大家想了解可以在评论区讨论哦！
1.首先先在qtcreate中建立一个工程

2.在ui设计界面我们添加一个widget和pushbutton控件。通过点击pushbutton,我们的图片就显示在widget里面。

3.新建一个类，继承于QGraphicsView类。这个文件中我们主要是写设置和功能函数。然后将之前添加的空间widget的类修改为新建的类。在当前视图中设置场景，显示图片。并且写一个槽函数来实现点击显示图片的功能。

    //槽函数    void MainWindow::on_pushButton_clicked()    {        QImage *image;        image = new QImage();        QString fileName = QFileDialog::getOpenFileName(                    this, "open image file",                    ".",                    "Image files (*.bmp *.jpg *.pbm *.pgm *.png *.ppm *.xbm *.xpm);;All files (*.*)");        if(fileName != "")        {            if(image->load(fileName))            {                QGraphicsScene *scene = new QGraphicsScene;                scene->addPixmap(QPixmap::fromImage(*image));                ui->widget->setScene(scene);               }        }    }

4.到这一步就实现了显示图片，关于平移旋转和缩放我们可以重写函数。

    // 上/下/左/右键向各个方向移动、加/减键进行缩放、空格/回车键旋转        void keyPressEvent(QKeyEvent *event) Q_DECL_OVERRIDE;        // 平移        void mouseMoveEvent(QMouseEvent *event) Q_DECL_OVERRIDE;        void mousePressEvent(QMouseEvent *event) Q_DECL_OVERRIDE;        void mouseReleaseEvent(QMouseEvent *event) Q_DECL_OVERRIDE;        // 放大/缩小        void wheelEvent(QWheelEvent *event) Q_DECL_OVERRIDE;        void mouseDoubleClickEvent(QMouseEvent *event) Q_DECL_OVERRIDE;

其中，keyPressEvent函数是键盘控制的，其他的都是鼠标控制的。具体的代码就不在这里贴出来了，会放在末尾的链接中。大家可以下载下来进行测试，可以在虚拟机中运行，也可以交叉编译在ARM平台下运行，效果都是一样的。但是不同的是在ARM平台下，图片如果过大，可能会导致内存溢出的问题。这个暂时还未解决。
5.运行效果如下：

总结

这只是一个最简单的图片浏览器，关于平移缩放的函数也已经分装到一个文件中了，大家如果有用到的地方，可以直接进行二次开发。

工程链接：点击阅读全文查看

点文末“扩展链接”，查看项目资料