QT学习之图形视图

ゝ一世哀愁。 2022-03-25 10:12 225阅读 0赞

### 文章目录 ###

*  简述
 *  场景
 *  视图
 *   *  代码
     *  效果
 *  图形项
 *   *  代码
 *  参考

# 简述 #

在前面讲的基本绘图中，我们可以自己绘制各种图形，并且控制它们。但是，如果需要同时绘制很多个相同或不同的图形，并且要控制它们的移动、检测它们的碰撞和叠加；或者我们想让自己绘制的图形可以拖动位置、进行缩放和旋转等操作。实现这些功能，要是还使用以前的方法，那么会十分困难。解决这些问题，可以使用Qt提供的图形视图框架。

图形视图框架提供了一个基于图形项的模型视图编程方法，主要由**场景、视图、和图形**项三部分组成，这三部分**QGraphicsScene、QGraphicsView和QGraphicsItem**这三个类来表示，多个视图可以查看一个场景，场景中包含各种各样几何形状的图形项。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70]

# 场景 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 3]

# 视图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 4]

## 代码 ##

#include <QApplication>
    #include <QGraphicsScene>
    #include <QGraphicsRectItem>
    #include <QDebug>
    #include <QGraphicsView>
    
    int main(int argc,char* argv[ ])
    {
        QApplication app(argc,argv);
        // 新建场景
        QGraphicsScene scene;
        // 创建矩形图形项
        QGraphicsRectItem *item = new QGraphicsRectItem(0, 0, 100, 100);
        // 将图形项添加到场景中
        scene.addItem(item);
        // 输出(50, 50)点处的图形项
        qDebug() << scene.itemAt(50, 50, QTransform());
    
        // 为场景创建视图
        QGraphicsView view(&scene);
    //    // 设置场景的前景色
    //    view.setForegroundBrush(QColor(255, 255, 0, 100));
    //    // 设置场景的背景图片
    //    view.setBackgroundBrush(QPixmap("../myScene/background.png"));
    
        scene.setForegroundBrush(QColor(255, 255, 0, 100));
        scene.setBackgroundBrush(QPixmap("background.png"));
    
        view.resize(400, 300);
        view.show();
        return app.exec();
    }

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][20190120142437525.png]  
![在这里插入图片描述][20190120143044210.png]

# 图形项 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 7]

## 代码 ##

myitem.cpp

#include "myitem.h"
    #include <QPainter>
    
    MyItem::MyItem()
    {
    
    }
    
    MyItem::~MyItem()
    {
    
    }
    
    QRectF MyItem::boundingRect() const
    {
    	qreal penWidth = 1;
    	return QRectF(0 - penWidth / 2, 0 - penWidth / 2, 20 + penWidth, 20 + penWidth);
    }
    
    void MyItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
    {
    	painter->setBrush(Qt::red);
    	painter->drawRect(0, 0, 20, 20);
    }

myitem.h

#ifndef MYITEM_H
    #define MYITEM_H
    
    #include <QGraphicsItem>
    
    class MyItem : public QGraphicsItem
    {
    	//Q_OBJECT
    
    public:
    	MyItem();
    	~MyItem();
    	QRectF boundingRect() const;
    	void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
    private:
    	
    };
    
    #endif // MYITEM_H

main.cpp

#include "ch11_1_3.h"
    #include "myitem.h"
    
    #include <QtWidgets/QApplication>
    #include <QGraphicsScene>
    #include <QGraphicsRectItem>
    #include <QDebug>
    #include <QGraphicsView>
    
    int main(int argc, char *argv[])
    {
    	QApplication a(argc, argv);
    	//ch11_1_3 w;
    	//w.show();
        QGraphicsScene scene;
        // 创建矩形图形项
        MyItem *item = new MyItem;
        // 将图形项添加到场景中
        scene.addItem(item);
        // 输出(50, 50)点处的图形项
        qDebug() << scene.itemAt(50, 50, QTransform());
    
        // 为场景创建视图
        QGraphicsView view(&scene);
    //    // 设置场景的前景色
    //    view.setForegroundBrush(QColor(255, 255, 0, 100));
    //    // 设置场景的背景图片
    //    view.setBackgroundBrush(QPixmap("../myScene/background.png"));
    
        scene.setForegroundBrush(QColor(255, 255, 0, 100));
        scene.setBackgroundBrush(QPixmap("../myscene/background.png"));
    
        view.resize(400, 300);
        view.show();
    
    	return a.exec();
    }

# 参考 #

[http://www.qter.org/portal.php?mod=view&aid=48][http_www.qter.org_portal.php_mod_view_aid_48]  
[https://blog.csdn.net/liang19890820/article/details/51966791][https_blog.csdn.net_liang19890820_article_details_51966791]  
[http://doc.qt.io/qt-5/graphicsview.html][http_doc.qt.io_qt-5_graphicsview.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70]: /images/20220325/352f33d6f026467daa321216af3045fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 1]: /images/20220325/a37d0e371de04a78822a22b7e8f2a8b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 2]: /images/20220325/25c1c5c8933045eebbb546f3a4c38ed5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 3]: /images/20220325/928b900341a5496090206ce94c7dab71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 4]: /images/20220325/c9a85f9a0c1a4974a26c078423669249.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 5]: /images/20220325/d76db8e4c32c4e08b05279c9d76d34bc.png
[20190120142437525.png]: /images/20220325/0c028876c654473d8af23b3f8b8f5c72.png
[20190120143044210.png]: /images/20220325/3be003dcee6d40f7914405584974d46e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 6]: /images/20220325/30a787ac37e2471bae0a25a8858201a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eTk0NQ_size_16_color_FFFFFF_t_70 7]: /images/20220325/13bd3788d0d7442fadeaea53e37c5794.png
[http_www.qter.org_portal.php_mod_view_aid_48]: http://www.qter.org/portal.php?mod=view&aid=48
[https_blog.csdn.net_liang19890820_article_details_51966791]: https://blog.csdn.net/liang19890820/article/details/51966791
[http_doc.qt.io_qt-5_graphicsview.html]: http://doc.qt.io/qt-5/graphicsview.html