Qt的绘图系统允许使用相同的API在屏幕和打印设备上进行绘制。整个绘图系统基于QPainter,QPainterDevice和QPaintEngine三个类。
QPainter用来执行绘制的操作;QPaintDevice是一个二维空间的抽象,这个二维空间可以由QPainter在上面进行绘制;QPaintEngine提供了画笔painter在不同的设备上进行绘制的统一的接口。QPaintEngine类用在QPainter和QPaintDevice之间,并且通常对开发人员是透明的,除非你需要自定义一个设备,这时候你就必须重新定义QPaintEngine了。
下图给出了这三个类之间的层次结构(出自Qt API 文档):
这种实现的主要好处是,所有的绘制都遵循着同一种绘制流程,这样,添加可以很方便的添加新的特性,也可以为不支持的功能添加一个默认的实现方式。另外需要说明一点,Qt提供了一个独立的QtOpenGL模块,可以让你在Qt的应用程序中使用OpenGL功能。该模块提供了一个OpenGL的模块,可以像其他的Qt组件一样的使用。它的不同之处在于,它是使用OpenGL作为显示技术,使用OpenGL函数进行绘制。对于这个组件,我们以后会再介绍。
通过前面的介绍我们知道,Qt的绘图系统实际上是说,使用QPainter在QPainterDevice上面进行绘制,它们之间使用QPaintEngine进行通讯。好了,下面我们来看看怎么使用QPainter。
首先我们定义一个组件,同前面的定义类似:
class PaintedWidget : public QWidget
{
public:
PaintedWidget();
protected:
void paintEvent(QPaintEvent *event);
};
{
public:
PaintedWidget();
protected:
void paintEvent(QPaintEvent *event);
};
这里我们只定义了一个构造函数,并且重定义paintEvent()函数。从名字就可以看出,这实际上是一个事件的回调函数。请注意,一般而言,Qt的事件函数都是protected的,所以,如果你要重写事件,就需要继承这个类了。至于事件相关的东西,我们在前面的内容已经比较详细的叙述了,这里不再赘述。
构造函数里面主要是一些大小之类的定义,这里不再详细说明:
PaintedWidget::PaintedWidget()
{
resize(800, 600);
setWindowTitle(tr("Paint Demo"));
}
{
resize(800, 600);
setWindowTitle(tr("Paint Demo"));
}
我们关心的是paintEvent()函数的实现:
void PaintedWidget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.drawLine(80, 100, 650, 500);
painter.setPen(Qt::red);
painter.drawRect(10, 10, 100, 400);
painter.setPen(QPen(Qt::green, 5));
painter.setBrush(Qt::blue);
painter.drawEllipse(50, 150, 400, 200);
}
{
QPainter painter(this);
painter.drawLine(80, 100, 650, 500);
painter.setPen(Qt::red);
painter.drawRect(10, 10, 100, 400);
painter.setPen(QPen(Qt::green, 5));
painter.setBrush(Qt::blue);
painter.drawEllipse(50, 150, 400, 200);
}
为了把我们的程序运行起来,下面是main()函数:
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
PaintedWidget w;
w.show();
return app.exec();
}
{
QApplication app(argc, argv);
PaintedWidget w;
w.show();
return app.exec();
}
运行结果如下所示:
首先,我们声明了一个QPainter对象。注意,我们在这个函数的栈空间建立了对象,因此不需要delete。
QPainter接收一个QPaintDevice*类型的参数。QPaintDevice有很多子类,比如QImage,以及QWidget。注意回忆一下,QPaintDevice可以理解成要在哪里去画,而现在我们希望在这个widget上画,因此传入的是this指针。
QPainter有很多以draw开头的函数,用于各种图形的绘制,比如这里的drawLine,drawRect和和drawEllipse等。具体的参数请参阅API文档。下图给出了QPainter的draw函数的实例,本图来自C++ GUI Programming with Qt4, 2nd Edition.
好了,今天先到这里,我们将在下面一章中继续对这个paintEvent()函数进行说明。
首先还是要先把上次的代码拿上来。
void PaintedWidget::paintEvent(QPaintEvent *
event)
{
QPainter painter( this);
painter.drawLine(80, 100, 650, 500);
painter.setPen(Qt::red);
painter.drawRect(10, 10, 100, 400);
painter.setPen(QPen(Qt::green, 5));
painter.setBrush(Qt::blue);
painter.drawEllipse(50, 150, 400, 200);
}
{
QPainter painter( this);
painter.drawLine(80, 100, 650, 500);
painter.setPen(Qt::red);
painter.drawRect(10, 10, 100, 400);
painter.setPen(QPen(Qt::green, 5));
painter.setBrush(Qt::blue);
painter.drawEllipse(50, 150, 400, 200);
}
上次我们说的是Qt绘图相关的架构,以及QPainter的建立和drawXXXX函数。可以看到,基本上代码中已经设计到得函数还剩下两个:setPen()和setBrush()。现在,我们就要把这两个函数讲解一下。
Qt绘图系统提供了三个主要的参数设置,画笔(pen)、画刷(brush)和字体(font)。这里我们要说明的是画笔和画刷。
所谓画笔,是用于绘制线的,比如线段、轮廓线等,都需要使用画笔绘制。画笔类即QPen,可以设置画笔的样式,例如虚线、实现之类,画笔的颜色,画笔的转折点样式等。画笔的样式可以在创建时指定,也可以由setStyle()函数指定。画笔支持三种主要的样式:笔帽(cap),结合点(join)和线形 (line)。这些样式具体显示如下(图片来自C++ GUI Programming with Qt4, 2nd Edition):
Qt绘图系统提供了三个主要的参数设置,画笔(pen)、画刷(brush)和字体(font)。这里我们要说明的是画笔和画刷。
所谓画笔,是用于绘制线的,比如线段、轮廓线等,都需要使用画笔绘制。画笔类即QPen,可以设置画笔的样式,例如虚线、实现之类,画笔的颜色,画笔的转折点样式等。画笔的样式可以在创建时指定,也可以由setStyle()函数指定。画笔支持三种主要的样式:笔帽(cap),结合点(join)和线形 (line)。这些样式具体显示如下(图片来自C++ GUI Programming with Qt4, 2nd Edition):
上图共分成三行:第一行是Cap样式,第二行是Join样式,第三行是Line样式。QPen允许你使用setCapStyle()、setJoinStyle()和setStyle()分别进行设置。具体请参加API文档。
所谓画刷,主要用来填充封闭的几何图形。画刷主要有两个参数可供设置:颜色和样式。当然,你也可以使用纹理或者渐变色来填充图形。请看下面的图片(图片出自Qt API 文档):
这里给出了不同style的画刷的表现。同画笔类似,这些样式也可用通过一个enum进行设置。
明白了这些之后我们再来看看我们的代码。首先,我们直接使用drawLine()函数,由于没有设置任何样式,所以使用的是默认的1px,,黑色,solid样式画了一条直线;然后使用setPen()函数,将画笔设置成Qt::red,即红色,画了一个矩形;最后将画笔设置成绿色,5px,画刷设置成蓝色,画了一个椭圆。这样便显示出了我们最终的样式:
另外要说明一点,请注意我们的绘制顺序,首先是直线,然后是矩形,最后是椭圆。这样,因为椭圆是最后画的,因此在最上方。
在我们学习OpenGL的时候,肯定听过这么一句话:OpenGL是一个状态机。所谓状态机,就是说,OpenGL保存的只是各种状态。怎么理解呢?比如,你把颜色设置成红色,那么,直到你重新设置另外的颜色,它的颜色会一直是红色。QPainter也是这样,它的状态不会自己恢复,除非你使用了各种set函数。因此,如果在上面的代码中,我们在椭圆绘制之后再画一个椭圆,它的样式还会是绿色5px的轮廓和蓝色的填充,除非你显式地调用了set进行更新。这可能是绘图系统较多的实现方式,因为无论是OpenGL、QPainter还是Java2D,都是这样实现的(DirectX不大清楚)。