QT学习之图形视图

简述

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

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

场景

视图

代码

#include 
#include 
#include 
#include 
#include 

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();
}

效果

图形项

代码

myitem.cpp

#include "myitem.h"
#include 

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 

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 
#include 
#include 
#include 
#include 

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
https://blog.csdn.net/liang19890820/article/details/51966791
http://doc.qt.io/qt-5/graphicsview.html