说实话,本来我是没有打算放一个很大的例子的,一则比较复杂,二来或许需要很多次才能说得完。不过,现在已经说完了绘图部分,所以计划还是上一个这样的例子。这里我会只做出一个简单的画板程序,大体上就是能够画直线和矩形吧。这样,我计划分成两种实现,一是使用普通的QWidget作为画板,第二则是使用Graphcis View Framework来实现。因为前面有朋友说不大明白Graphics View的相关内容,所以计划如此。
 
好了,现在先来看看我们的主体框架。我们的框架还是使用Qt Creator创建一个Gui Application工程。
 
简单的main()函数就不再赘述了,这里首先来看MainWindow。顺便说一下,我一般不会使用ui文件,所以这些内容都是手写的。首先先来看看最终的运行结果:
 
 
或许很简单,但是至少我们能够把前面所说的各种知识串连起来,这也就达到目的了。
 
现在先来看看MainWindow的代码:
 
mainwindow.h
InBlock.gif#ifndef MAINWINDOW_H 
InBlock.gif#define MAINWINDOW_H 
InBlock.gif 
InBlock.gif#include <QtGui> 
InBlock.gif 
InBlock.gif#include  "shape.h" 
InBlock.gif#include  "paintwidget.h" 
InBlock.gif 
InBlock.gif class MainWindow :  public QMainWindow 
InBlock.gif
InBlock.gif        Q_OBJECT 
InBlock.gif 
InBlock.gif public
InBlock.gif        MainWindow(QWidget *parent = 0); 
InBlock.gif 
InBlock.gifsignals: 
InBlock.gif         void changeCurrentShape(Shape::Code newShape); 
InBlock.gif 
InBlock.gif private slots: 
InBlock.gif         void drawLineActionTriggered(); 
InBlock.gif         void drawRectActionTriggered(); 
InBlock.gif 
InBlock.gif}; 
InBlock.gif 
InBlock.gif#endif  // MAINWINDOW_H
 
mainwindow.cpp
InBlock.gif#include  "mainwindow.h" 
InBlock.gif 
InBlock.gifMainWindow::MainWindow(QWidget *parent) 
InBlock.gif        : QMainWindow(parent) 
InBlock.gif
InBlock.gif        QToolBar *bar =  this->addToolBar( "Tools"); 
InBlock.gif        QActionGroup *group =  new QActionGroup(bar); 
InBlock.gif 
InBlock.gif        QAction *drawLineAction =  new QAction( "Line", bar); 
InBlock.gif        drawLineAction->setIcon(QIcon( ":/line.png")); 
InBlock.gif        drawLineAction->setToolTip(tr( "Draw a line.")); 
InBlock.gif        drawLineAction->setStatusTip(tr( "Draw a line.")); 
InBlock.gif        drawLineAction->setCheckable( true); 
InBlock.gif        drawLineAction->setChecked( true); 
InBlock.gif        group->addAction(drawLineAction); 
InBlock.gif 
InBlock.gif        bar->addAction(drawLineAction); 
InBlock.gif        QAction *drawRectAction =  new QAction( "Rectangle", bar); 
InBlock.gif        drawRectAction->setIcon(QIcon( ":/rect.png")); 
InBlock.gif        drawRectAction->setToolTip(tr( "Draw a rectangle.")); 
InBlock.gif        drawRectAction->setStatusTip(tr( "Draw a rectangle.")); 
InBlock.gif        drawRectAction->setCheckable( true); 
InBlock.gif        group->addAction(drawRectAction); 
InBlock.gif        bar->addAction(drawRectAction); 
InBlock.gif 
InBlock.gif        QLabel *statusMsg =  new QLabel; 
InBlock.gif        statusBar()->addWidget(statusMsg); 
InBlock.gif 
InBlock.gif        PaintWidget *paintWidget =  new PaintWidget( this); 
InBlock.gif        setCentralWidget(paintWidget); 
InBlock.gif 
InBlock.gif        connect(drawLineAction, SIGNAL(triggered()), 
InBlock.gif                         this, SLOT(drawLineActionTriggered())); 
InBlock.gif        connect(drawRectAction, SIGNAL(triggered()), 
InBlock.gif                         this, SLOT(drawRectActionTriggered())); 
InBlock.gif        connect( this, SIGNAL(changeCurrentShape(Shape::Code)), 
InBlock.gif                        paintWidget, SLOT(setCurrentShape(Shape::Code))); 
InBlock.gif
InBlock.gif 
InBlock.gif void MainWindow::drawLineActionTriggered() 
InBlock.gif
InBlock.gif        emit changeCurrentShape(Shape::Line); 
InBlock.gif
InBlock.gif 
InBlock.gif void MainWindow::drawRectActionTriggered() 
InBlock.gif
InBlock.gif        emit changeCurrentShape(Shape::Rect); 
InBlock.gif
 
应该说,从以往的学习中可以看出,这里的代码没有什么奇怪的了。我们在MainWindow类里面声明了一个信号,changeCurrentShape(Shape::Code),用于按钮按下后通知画图板。注意,QActio的triggered()信号是没有参数的,因此,我们需要在QAction的槽函数中重新emit我们自己定义的信号。构造函数里面创建了两个QAction,一个是drawLineAction,一个是drawRectAction,分别用于绘制直线和矩形。MainWindow的中心组件是PainWidget,也就是我们的画图板。下面来看看PaintWidget类:
 
paintwidget.h
InBlock.gif#ifndef PAINTWIDGET_H 
InBlock.gif#define PAINTWIDGET_H 
InBlock.gif 
InBlock.gif#include <QtGui> 
InBlock.gif#include <QDebug> 
InBlock.gif#include  "shape.h" 
InBlock.gif#include  "line.h" 
InBlock.gif#include  "rect.h" 
InBlock.gif 
InBlock.gif class PaintWidget :  public QWidget 
InBlock.gif
InBlock.gif        Q_OBJECT 
InBlock.gif 
InBlock.gif public
InBlock.gif        PaintWidget(QWidget *parent = 0); 
InBlock.gif 
InBlock.gif public slots: 
InBlock.gif         void setCurrentShape(Shape::Code s) 
InBlock.gif        { 
InBlock.gif                 if(s != currShapeCode) { 
InBlock.gif                        currShapeCode = s; 
InBlock.gif                } 
InBlock.gif        } 
InBlock.gif 
InBlock.gif protected
InBlock.gif         void paintEvent(QPaintEvent * event); 
InBlock.gif         void mousePressEvent(QMouseEvent * event); 
InBlock.gif         void mouseMoveEvent(QMouseEvent * event); 
InBlock.gif         void mouseReleaseEvent(QMouseEvent * event); 
InBlock.gif 
InBlock.gif private
InBlock.gif        Shape::Code currShapeCode; 
InBlock.gif        Shape *shape; 
InBlock.gif         bool perm; 
InBlock.gif        QList<Shape*> shapeList; 
InBlock.gif}; 
InBlock.gif 
InBlock.gif#endif  // PAINTWIDGET_H 
 
paintwidget.cpp
InBlock.gif#include  "paintwidget.h" 
InBlock.gif 
InBlock.gifPaintWidget::PaintWidget(QWidget *parent) 
InBlock.gif        : QWidget(parent), currShapeCode(Shape::Line), shape(NULL), perm( false
InBlock.gif
InBlock.gif        setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); 
InBlock.gif
InBlock.gif 
InBlock.gif void PaintWidget::paintEvent(QPaintEvent * event
InBlock.gif
InBlock.gif        QPainter painter( this); 
InBlock.gif        painter.setBrush(Qt::white); 
InBlock.gif        painter.drawRect(0, 0, size().width(), size().height()); 
InBlock.gif         foreach(Shape * shape, shapeList) { 
InBlock.gif                shape->paint(painter); 
InBlock.gif        } 
InBlock.gif         if(shape) { 
InBlock.gif                shape->paint(painter); 
InBlock.gif        } 
InBlock.gif
InBlock.gif 
InBlock.gif void PaintWidget::mousePressEvent(QMouseEvent * event
InBlock.gif
InBlock.gif         switch(currShapeCode) 
InBlock.gif        { 
InBlock.gif         case Shape::Line: 
InBlock.gif                { 
InBlock.gif                        shape =  new Line; 
InBlock.gif                         break
InBlock.gif                } 
InBlock.gif         case Shape::Rect: 
InBlock.gif                { 
InBlock.gif                        shape =  new Rect; 
InBlock.gif                         break
InBlock.gif                } 
InBlock.gif        } 
InBlock.gif         if(shape != NULL) { 
InBlock.gif                perm =  false
InBlock.gif                shapeList<<shape; 
InBlock.gif                shape->setStart( event->pos()); 
InBlock.gif                shape->setEnd( event->pos()); 
InBlock.gif        } 
InBlock.gif
InBlock.gif 
InBlock.gif void PaintWidget::mouseMoveEvent(QMouseEvent * event
InBlock.gif
InBlock.gif         if(shape && !perm) { 
InBlock.gif                shape->setEnd( event->pos()); 
InBlock.gif                update(); 
InBlock.gif        } 
InBlock.gif
InBlock.gif 
InBlock.gif void PaintWidget::mouseReleaseEvent(QMouseEvent * event
InBlock.gif
InBlock.gif        perm =  true
InBlock.gif
 
PaintWidget类定义了一个slot,用于接收改变后的新的ShapeCode。最主要的是,PaintWidget重定义了三个关于鼠标的事件:mousePressEvent,mouseMoveEvent和mouseReleaseEvent。
 
我们来想象一下如何绘制一个图形:图形的绘制与鼠标操作息息相关。以画直线为例,首先我们需要按下鼠标,确定直线的第一个点,所以在mousePressEvent里面,我们让shape保存下start点。然后在鼠标按下的状态下移动鼠标,此时,直线就会发生变化,实际上是直线的终止点在随着鼠标移动,所以在mouseMoveEvent中我们让shape保存下end点,然后调用update()函数,这个函数会自动调用paintEvent()函数,显示出我们绘制的内容。最后,当鼠标松开时,图形绘制完毕,我们将一个标志位置为true,此时说明这个图形绘制完毕。
 
为了保存我们曾经画下的图形,我们使用了一个List。每次按下鼠标时,都会把图形存入这个List。可以看到,我们在paintEvent()函数中使用了foreach遍历了这个List,绘制出历史图形。foreach是Qt提供的一个宏,用于遍历集合中的元素。
 
最后我们来看看Shape类。
 
shape.h
InBlock.gif#ifndef SHAPE_H 
InBlock.gif#define SHAPE_H 
InBlock.gif 
InBlock.gif#include <QtGui> 
InBlock.gif 
InBlock.gif class Shape 
InBlock.gif
InBlock.gif public
InBlock.gif 
InBlock.gif         enum Code { 
InBlock.gif                Line, 
InBlock.gif                Rect 
InBlock.gif        }; 
InBlock.gif 
InBlock.gif        Shape(); 
InBlock.gif 
InBlock.gif         void setStart(QPoint s) 
InBlock.gif        { 
InBlock.gif                start = s; 
InBlock.gif        } 
InBlock.gif 
InBlock.gif         void setEnd(QPoint e) 
InBlock.gif        { 
InBlock.gif                end = e; 
InBlock.gif        } 
InBlock.gif 
InBlock.gif        QPoint startPoint() 
InBlock.gif        { 
InBlock.gif                 return start; 
InBlock.gif        } 
InBlock.gif 
InBlock.gif        QPoint endPoint() 
InBlock.gif        { 
InBlock.gif                 return end; 
InBlock.gif        } 
InBlock.gif 
InBlock.gif         void  virtual paint(QPainter & painter) = 0; 
InBlock.gif 
InBlock.gif protected
InBlock.gif        QPoint start; 
InBlock.gif        QPoint end; 
InBlock.gif}; 
InBlock.gif 
InBlock.gif#endif  // SHAPE_H 
 
shape.cpp
InBlock.gif#include  "shape.h" 
InBlock.gif 
InBlock.gifShape::Shape() 
InBlock.gif
InBlock.gif
 
Shape类最重要的就是保存了start和end两个点。为什么只要这两个点呢?因为我们要绘制的是直线和矩形。对于直线来说,有了两个点就可以确定这条直线,对于矩形来说,有了两个点作为左上角的点和右下角的点也可以确定这个矩形,因此我们只要保存两个点,就足够保存这两种图形的位置和大小的信息。paint()函数是Shape类的一个纯虚函数,子类都必须实现这个函数。我们现在有两个子类:Line和Rect,分别定义如下:
 
line.h
InBlock.gif#ifndef LINE_H 
InBlock.gif#define LINE_H 
InBlock.gif 
InBlock.gif#include  "shape.h" 
InBlock.gif 
InBlock.gif class Line :  public Shape 
InBlock.gif
InBlock.gif public
InBlock.gif        Line(); 
InBlock.gif 
InBlock.gif         void paint(QPainter &painter); 
InBlock.gif}; 
InBlock.gif 
InBlock.gif#endif  // LINE_H 
 
line.cpp
InBlock.gif#include  "line.h" 
InBlock.gif 
InBlock.gifLine::Line() 
InBlock.gif
InBlock.gif
InBlock.gif 
InBlock.gif void Line::paint(QPainter &painter) 
InBlock.gif
InBlock.gif        painter.drawLine(start, end); 
InBlock.gif
 
rect.h
InBlock.gif#ifndef RECT_H 
InBlock.gif#define RECT_H 
InBlock.gif 
InBlock.gif#include  "shape.h" 
InBlock.gif 
InBlock.gif class Rect :  public Shape 
InBlock.gif
InBlock.gif public
InBlock.gif        Rect(); 
InBlock.gif 
InBlock.gif         void paint(QPainter &painter); 
InBlock.gif}; 
InBlock.gif 
InBlock.gif#endif  // RECT_H 
 
rect.cpp
InBlock.gif#include  "rect.h" 
InBlock.gif 
InBlock.gifRect::Rect() 
InBlock.gif
InBlock.gif
InBlock.gif 
InBlock.gif void Rect::paint(QPainter &painter) 
InBlock.gif
InBlock.gif        painter.drawRect(start.x(), start.y(), 
InBlock.gif                                         end.x() - start.x(), end.y() - start.y()); 
InBlock.gif
 
使用paint()函数,根据两个点的数据,Line和Rect都可以绘制出它们自身来。此时就可以看出,我们之所以要建立一个Shape作为父类,因为这两个类有几乎完全相似的数据对象,并且从语义上来说,Line、Rect与Shape也完全是一个is-a的关系。如果你想要添加颜色等的信息,完全可以在Shape类进行记录。这也就是类层次结构的好处。
 
代码很多也会比较乱,附件里面是整个工程的文件,有兴趣的朋友不妨看看哦!