Qt Graphics View Framework(1)---简单使用

简介

本次主要涉及一下3个类
1. QGraphicsView：显示图形的窗口。
2. QGraphicsScene：用于绘制的画布，一切的绘制和时间都发生在画布上，QGraphicsView用于展示QGraphicsScene，如果画布大于QGraphicsView的尺寸，窗口会自动创建滚动条。
3. QGraphicsItem：在QGraphicsScene上展示的item。QGraphicsScene使用一个BSP（二进制空间分区Binary Space Partitioning）树来提供快速的项发现，正因为如此，它可以使巨大的场景实时地可视化，即便它有上百万个项（item）。

使用QGraphicsView来绘制一个长方体

首先我们来写一个QGraphicsItem的子类来作为我们的长方体。
子类主要重写一下三个函数：
1. QRectF boundingRect()const
定义项目的外形，QGraphicsView使用它来决定重绘的范围 ，所以你可以在这个范围外搞事情，但搞完后QGraphicsView不会帮忙擦屁股。
2. void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
绘图事件，类似于paintEvent。
3. QPainterPath shape()const
表明item的形状主要用于碰撞检测，命中测试等等。

这里函数比较少就这样写了，希望不影响可读性。

class MyItem : public QGraphicsItem
{
public:
    MyItem(QRect rect)
    {
        m_rect = rect;
    }
    QRectF boundingRect()const
    {
        return m_rect;
    }
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
    {
        Q_UNUSED(option);//
        Q_UNUSED(widget);//取消警告，看着心烦
        painter->drawRect(QRect(m_rect.x(),m_rect.y(),m_rect.width(),m_rect.height()));
    }
    QPainterPath shape()const
    {
        QPainterPath path;
        path.addRect(m_rect);
        return path;
    }
private:
    QRect m_rect;
};

之后建立窗口，设置画布：

QGraphicsScene scene;
scene.setSceneRect(-300,-300,600,600);//为了让原点在画布中心

QGraphicsView view(&scene);
view.setGeometry(200,200,400,400);

MyItem *item = new MyItem(QRect(0,0,200,200));//基于画布的坐标
scene.addItem(item);//往“画布”上绘制MyItem
item->setPos(0,0);

view.show();

这样就完成了长方形的绘制。

其他

感觉第一篇毛都没讲啊，坐标这一块准备放到第二篇，再介绍一点帅气的功能把：

选中

在构造函数中添加

setFlags(ItemIsSelectable);

在paint中添加

if(option->state & QStyle::State_Selected)
        {
            painter->setPen(QPen(Qt::red,2,Qt::DotLine));
            painter->drawRect(m_rect);
        }

现在我们的item会对选中做出响应。

拖动

继续添加标记。（可以在帮助文档中看到其他标记）

setFlags(ItemIsSelectable | ItemIsMovable);

就可以让我们拖着item到处动了。

缩放，旋转

1. 缩放
   使用QGraphicsView的scale方法进行缩放。例如

view.scale(2,4);

1. 旋转
   使用QGraphicsView的rotate方法进行缩放。例如

view.rotate(30);