如何在Qt Creator里2D绘图
先来明确一些基本的知识。
首先,明确要在什么上进行绘图。根据教材《Qt Creator快速入门》(霍亚飞编著)的第十章上的说法,Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕上和绘图设备上进行绘制,主要基于QPainter、QPainterDevice和QPainterEngine这3个类。
其中,QPainterDevice提供绘图设备,供QPainter在其上面进行绘制。我们常用的QWidget就是它的子类,这次,我们就在QWidget上绘图。
下面着重介绍几个重要的地方。
一、重绘事件的处理函数 :paintEvent()
我们想要绘图,就必须实现paintEvent()函数。
例如,我们要画一条直线:
void Widget::paintEvent(QPaintEvent *)
{
QPainter painter(this);
painter.drawLine(QPoint(0, 0), QPoint(100, 100));
}
就需要重写一个paintEvent函数。其中,里面的QPainter painter一经创建,就会立即在绑定的设备上进行绘制。这里面的this也就是在程序运行的时候建立的QWidget对象。
二、绘图用的工具
用什么绘图呢?就要提到画笔和画刷。画笔与画刷是Qt绘图时非常重要的东西。画笔用QPen描述,来绘制轮廓线,而画刷用QBrush描述,用来填充。
典型的画笔构造函数如下:
QPen ( const QBrush & brush, qreal width, Qt::PenStyle style = Qt::SolidLine, Qt::PenCapStyle cap = Qt::SquareCap, Qt::PenJoinStyle join = Qt::BevelJoin);
其中包含了画笔使用的画刷,线宽,画笔风格,画笔端点风格,画笔连接风格。
典型的画刷构造函数如下:
QBrush ( Qt::GlobalColor color, Qt::BrushStyle style = Qt::SolidPattern )
QBrush 主要定义了 QPainter 的填充模式(style),具有的样式、颜色(QColor)等。
此外还可以使用特殊的渐变效果。
下面从一个例子开始:
以下例子选自《Qt Creator快速入门》(霍亚飞编著)的第十章,首先,我在对应代码的行后做了简单注释,更细的知识点写在文章后面部分。
#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
}
Widget::~Widget()
{
delete ui;
}
void Widget::paintEvent(QPaintEvent *)
{
QPainter painter(this);//绑定绘图设备
painter.drawLine(QPoint(0, 0), QPoint(100, 100));//画一条直线
//创建画笔
QPen pen(Qt::green, 5, Qt::DotLine, Qt::RoundCap, Qt::RoundJoin);
//使用画笔
painter.setPen(pen);
QRectF rectangle(70.0, 40.0, 80.0, 60.0);//范围
int startAngle = 30 * 16;//开始的倾角
int spanAngle = 120 * 16;//画图的范围
//绘制圆弧
painter.drawArc(rectangle, startAngle, spanAngle);
//重新设置画笔
pen.setWidth(1);
pen.setStyle(Qt::SolidLine);//实心线
painter.setPen(pen);
//绘制一个矩形
painter.drawRect(160, 20, 50, 40);
// 创建画刷
QBrush brush(QColor(0, 0, 255), Qt::Dense4Pattern);
// 使用画刷
painter.setBrush(brush);
// 绘制椭圆
painter.drawEllipse(220, 20, 50, 50);
// 设置纹理
brush.setTexture(QPixmap("../mydrawing/yafeilinux.png"));
// 重新使用画刷
painter.setBrush(brush);
// 定义四个点
static const QPointF points[4] = {
QPointF(270.0, 80.0),
QPointF(290.0, 10.0),
QPointF(350.0, 30.0),
QPointF(390.0, 70.0)//定义四个点,用以绘制多边形
};
// 使用四个点绘制多边形
painter.drawPolygon(points, 4);
// 使用画刷填充一个矩形区域
painter.fillRect(QRect(10, 100, 150, 20), QBrush(Qt::darkYellow));
// 擦除一个矩形区域的内容
painter.eraseRect(QRect(50, 0, 50, 120));
// 线性渐变,设置线性渐变
QLinearGradient linearGradient(QPointF(40, 190), QPointF(70, 190));
// 插入颜色,给线性渐变插入需要的颜色
linearGradient.setColorAt(0, Qt::yellow);
linearGradient.setColorAt(0.5, Qt::red);
linearGradient.setColorAt(1, Qt::green);
// 指定渐变区域以外的区域的扩散方式
linearGradient.setSpread(QGradient::RepeatSpread);
// 使用渐变作为画刷,设置画刷
painter.setBrush(linearGradient);
painter.drawRect(10, 170, 90, 40);//画一个矩形
// 辐射渐变
QRadialGradient radialGradient(QPointF(200, 190), 50, QPointF(275, 200));//设置辐射渐变
radialGradient.setColorAt(0, QColor(255, 255, 100, 150));//给辐射渐变加颜色
radialGradient.setColorAt(1, QColor(0, 0, 0, 50));//给辐射渐变加颜色
painter.setBrush(radialGradient);//设置画刷
painter.drawEllipse(QPointF(200, 190), 50, 50);//画一个椭圆
// 锥形渐变
QConicalGradient conicalGradient(QPointF(350, 190), 60);//设置一个锥形渐变
conicalGradient.setColorAt(0.2, Qt::cyan);//给锥形渐变加颜色
conicalGradient.setColorAt(0.9, Qt::black);//给锥形渐变加颜色
painter.setBrush(conicalGradient);//设置画刷
painter.drawEllipse(QPointF(350, 190), 50, 50);//画一个椭圆
// 画笔使用线性渐变来绘制直线和文字
painter.setPen(QPen(linearGradient,2));
painter.drawLine(0, 280, 100, 280);
painter.drawText(150, 280, tr("helloQt!"));
}
以上可以看出,绘图的主要步骤就是设置画笔、画刷,如果需要使用特殊效果那就设置特殊的渐变,然后给渐变加颜色,最后再将渐变设置到画刷里,画刷设置到画笔里,使用画笔绘图就可以了。