Qt之2D绘图

Qt中提供了强大的2D绘图系统，可以使用相同的API在屏幕和绘图设备上进行绘制，主要基于QPainter、QPaintDevice和QPaintEngine这3个类。其中，QPainter类用来执行绘图操作；QPaintDevice类提供绘图设备(绘图设备类QPaintDevice是所有可以绘制的对象的基类，它的子类主要有QWidget、QPixmap、QPicture、QImage和QPrinter)，是一个二维空间的抽象，可以使用QPainter在其上进行绘制；QPaintEngine类提供了一些接口，可以用于QPainter在不同的设备上进行绘制。

绘图系统中由QPainter来完成具体的绘制操作，提供了大量高度优化的函数来完成GUI编程所需要的大部分绘制工作。QPainter可以在继承自QPaintDevice类的任何对象上进行绘制操作。重点：QPainter一般在一个部件重绘(Paint Event)的处理函数paintEvent()中绘制；首先要创建QPainter对象，再进行图形的绘制，最后销毁QPainter对象。

QPainter提供的常用图形绘制函数

实例代码如下：

#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 *event)
{
    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("../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!"));
}

采用QPainter::QPainter(QPaintDevice* device)构造函数创建的对象会立即开始在设备上绘制，自动调用begin()函数，然后在QPainter的析构函数中调用end()函数结束绘制。

渐变填充：在Qt中，QGradient类就是用来和QBrush一起制定渐变填充的。

1、线性渐变在开始点和结束点之间插入颜色；

2、辐射渐变在焦点和环绕它的圆环间插入颜色；

3、锥形渐变在圆心周围插入颜色；

这3钟渐变分别由QGradient的3个子类来表示：QLinearQradient表示线性渐变、QRadialGradient表示辐射渐变和QConicalGradient表示锥形渐变。

抗锯齿渲染

QPainter进行绘制时可以使用QPainter::setRenderHint()函数渲染提示来指定是否要使用坑锯齿功能，其功能主要是对图像的边缘进行平滑处理，使其看起来更加柔和流畅。

坐标变换

QPainter的逻辑坐标与绘图设备(绘图设备的默认坐标系统中原点是(0, 0))的物理坐标之间的映射由QPainter的变换矩阵、视口和窗口处理，逻辑坐标和物理坐标默认是一致的。绘图时可以使用QPainter::scale()函数缩放坐标系统；使用QPainter::rotate()函数顺时针旋转坐标系统；使用QPainter::translate()函数平移坐标系统；使用QPainter::shear()围绕原点来扭曲坐标系统。

1、基本变换

坐标系统的2D变换由QTransform类实现，而且QTransform类对象可以存储多个变换操作，当同样的变换要多次使用时，建议使用QTransform类对象。坐标系统的变换是通过变换矩阵实现的，可以在平面上变换一个点到另一个点。进行所有变换操作的变换矩阵都可以使用QPainter::worldTransform()函数获得，如果要设置一个变换矩阵，可以使用QPainter::setWorldTransform()函数，这两个函数也可以分别使QPainter::transform()和QPainter::setTransform()函数来替代。

在进行变换操作时，可能需要多次改变坐标系统再恢复，这样就显得很乱，而且很容易出现操作错误。这时可以使用QPainter::save()函数来保存QPainter的变换矩阵，它会把变换矩阵保存到一个内部栈中，然后在需要恢复变换矩阵时再使用QPainter::restore()函数将其弹出。

2、窗口——视口转换

使用QPainter绘制时会使用到逻辑坐标，然后再转换为绘图设备的物理坐标。逻辑坐标到物理坐标的映射由QPainter的worldTransform()函数、QPainter的viewport()以及window()函数进行处理。其中，视口表示物理坐标下制定的一个任意矩形，而窗口表示逻辑坐标下的相同矩形。默认的，逻辑坐标和屋里坐标是重合的，都相当于绘图设备上的矩形。一个很好的办法是让视口和窗口维持相同的宽高比来防止变形：

    int side = qMin(width(), height());
    int x = (width() / 2);
    int y = (height() / 2);
    //设置窗口—视口转换
    painter.setViewport(x, y, side, side);

窗口——视口转换仅仅是线性变换，不会执行裁剪操作，这就意味着如果绘制范围超出了当前设置的窗口，那么仍然会使用相同的线性代数方法将绘制变换到视口上。

#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 *event)
{
    QPainter painter(this);
    //填充界面背景为白色
    painter.fillRect(rect(), Qt::white);
    painter.setPen(QPen(Qt::red, 11));
    //绘制一条线段
    painter.drawLine(QPoint(5, 6), QPoint(100, 99));
    //将坐标系统进行平移，使(200, 150)点作为原点
    painter.translate(200, 150);
    //开启抗锯齿
    painter.setRenderHint(QPainter::Antialiasing);
    //重新绘制相同的线段
    painter.drawLine(QPoint(5, 6), QPoint(100, 99));

    //保存painter的状态
    painter.save();
    //将坐标系统旋转90度
    painter.rotate(90);
    painter.setPen(Qt::cyan);
    //重新绘制相同的线段
    painter.drawLine(QPoint(5, 6), QPoint(100, 99));
    //恢复painter的状态
    painter.restore();

    painter.setBrush(Qt::darkGreen);
    //绘制一个矩形
    painter.drawRect(-50, -50, 100, 50);
    painter.save();
    //将坐标系统进行缩放
    painter.scale(0.5, 0.4);
    painter.setBrush(Qt::yellow);
    //重新绘制相同的矩形
    painter.drawRect(-50, -50, 100, 50);
    painter.restore();

    painter.setPen(Qt::blue);
    painter.setBrush(Qt::darkYellow);
    //绘制一个椭圆
    painter.drawEllipse(QRect(60, -100, 50, 50));
    //将坐标系统进行扭曲
    painter.shear(1.5, -0.7);
    painter.setBrush(Qt::darkGray);
    //重新绘制相同的椭圆
    painter.drawEllipse(QRect(60, -100, 50, 50));
}

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
#include <QToolTip>
#include <QMouseEvent>
#include <QTimer>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    setMouseTracking(true);

    QTimer *timer = new QTimer(this);
    connect(timer, SIGNAL(timeout()), this, SLOT(update()));
    timer->start(1000);
    angle = 0;
}

Widget::~Widget()
{
    delete ui;
}

void Widget::paintEvent(QPaintEvent *event)
{
    angle += 10;
    if(angle == 360)
        angle = 0;
    int side = qMin(width(), height());
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    QTransform transform;
    transform.translate(width()/2, height()/2);
    transform.scale(side/300.0, side/300.0);
    transform.rotate(angle);
    painter.setWorldTransform(transform);
    painter.drawEllipse(-120, -120, 240, 240);
    painter.drawLine(0, 0, 100, 0);
}

void Widget::mouseMoveEvent(QMouseEvent *event)
{
    QString pos = QString("%1,%2").arg(event->pos().x()).arg(event->pos().y());
    QToolTip::showText(event->globalPos(), pos, this);
}