如何在Qt Creator里2D绘图

发表于 作者 wlg

先来明确一些基本的知识。
首先，明确要在什么上进行绘图。根据教材《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 
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!"));
}

以上可以看出，绘图的主要步骤就是设置画笔、画刷，如果需要使用特殊效果那就设置特殊的渐变，然后给渐变加颜色，最后再将渐变设置到画刷里，画刷设置到画笔里，使用画笔绘图就可以了。

分类：
标签：