chapter8 二维图形

chapter8 二维图形

这一章的内容是关于二维图形的,这是Qt中相当精彩,但也是相当复杂的一个部分.你有很高的自由度,用Qt提供的方法实现相当完美的效果,一会儿会给出一个时钟的例子,但是用代码来表述,就不是那么简单了.对付复杂的视图,Qt还提供了一个图形项的框架,借助QGraphicsView, QGraphicsScene和QGraphicsItem,实现更加完美的交互,但是这部分的内容,尤其的复杂,我了解的并不多,因此这篇博客暂时不涉及,等到以后钻研清楚,再来补充.

Qt的二维图形引擎是基于QPainter类的,QPainter既可以绘制几何形状(点,线,矩形,椭圆,弧形等),也可以绘制图像和文字,支持一些高级特性,如反走样,渐变等,也可以平移和缩放,属于最底层的控制类.

使用QPainter,只需要重新实现QWidget::paintEvent()事件,就可以天马行空的绘制自己的图形了.

1.用QPainter绘图

框架一般是这个样子:

void MyWidget::paintEvent(QPaintEvent *Event){
	QPainter painter(this);
    ...
}

this指针传递的是一个绘图设备,这里让QPainter绘制在窗体上,也可以绘制在图像上等其他"绘图设备".

基本的绘制流程大致是这样:

1.设置画笔:QPen类,构造函数如下, QPen(const QBrush &brush, qreal width, Qt::PenStyle style = Qt::SolidLine, Qt::PenCapStyle cap = Qt::SquareCap, Qt::PenJoinStyle join = Qt::BevelJoin),其中包含了画笔的颜色,线宽,线的类型以及拐点等.

2.设置画刷:QBrush类,可以填充颜色,也可以填充图像,用于图形的填充.

3.调用QPainter的draw()函数,可以绘制矩形,椭圆等等.

QPainterPath也可以试着使用,但是没有那么的方便.

QPainter还提供了线性渐变,辐射渐变以及锥形渐变,都不是很复杂,看官方文档即可.

QPainter的save()和restore()方法,提供了一个回滚的机制,必要的时候可以使用.

2.坐标系统变换

这个坐标系统的变换,也是图形绘制中比较复杂的一部分,理解的很浅显,这里有三个概念:窗口,视口和世界矩阵.

解释一下:视口是物理坐标系下指定的人依据性,窗口也是指同意举行,但是实在逻辑坐标系下,绘制图形时使用的坐标是逻辑坐标,会以线性代数的方式转换为物理坐标,然后完成绘制.这种视口-窗口分离的机制,带来的最大优势就是:可以独立的绘制图形,而不必考虑它们如何在窗口中表达.

世界变化就是在窗口-视口转换之外使用的变换矩阵,设计移动,缩放,旋转等,主要是靠QTransform类来实现.

下面看个具体的例子:

OvenTime.h

#ifndef OVENTIMER_H
#define OVENTIMER_H

#include <QWidget>
#include <QDateTime>

namespace Ui {
class OvenTimer;
}
class OvenTimer : public QWidget
{
    Q_OBJECT

public:
    explicit OvenTimer(QWidget *parent = 0);
    ~OvenTimer();

    void setDuration(int secs);
    int duration() const;
    void draw(QPainter *painter);

private:
    Ui::OvenTimer *ui;
    QDateTime finishTime;
    QTimer *updateTimer;
    QTimer *finishTimer;

signals:
    void timeout();

protected:
    void paintEvent(QPaintEvent *event);
    void mousePressEvent(QMouseEvent *event);
};

#endif // OVENTIMER_H

OvenTime.cpp

#include <QPainter>
#include <QPen>
#include <QDateTime>
#include <QTimer>
#include <QPaintEvent>
#include "oventimer.h"
#include "ui_oventimer.h"

const double DegreesPerMinute = 7.0;
const double DegreesPerSecond = DegreesPerMinute / 60;
const int MaxMinutes = 45;
const int MaxSeconds = MaxMinutes * 60;
const int UpdateInterval = 5;

OvenTimer::OvenTimer(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::OvenTimer)
{
    //ui->setupUi(this);
    finishTime = QDateTime::currentDateTime();
    updateTimer = new QTimer(this);
    connect(updateTimer, SIGNAL(timeout()),
            this, SLOT(update()));

    finishTimer = new QTimer(this);
    finishTimer->setSingleShot(true);
    connect(finishTimer, SIGNAL(timeout()),
            this, SIGNAL(timeout()));
    connect(finishTimer, SIGNAL(timeout()),
            updateTimer, SLOT(stop()));

    QFont font;
    font.setPointSize(8);
    setFont(font);
}

void OvenTimer::setDuration(int secs){
    secs = qBound(0, secs, MaxSeconds);
    finishTime = QDateTime::currentDateTime().addSecs(secs);

    if(secs > 0){
        updateTimer->start(UpdateInterval * 1000);
        finishTimer->start(secs * 1000);
    }else{
        updateTimer->stop();
        finishTimer->stop();
    }
    update();
}

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

int OvenTimer::duration() const{
    int secs = QDateTime::currentDateTime().secsTo(finishTime);
    if(secs < 0){
        secs = 0;
    }
    return secs;
}

void OvenTimer::mousePressEvent(QMouseEvent *event){
    QPointF point = event->pos() - rect().center();
    double theta = std::atan2(-point.x(), -point.y()) * 180.0 / M_PI;
    setDuration(duration() + int(theta / DegreesPerSecond));
}

void OvenTimer::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    int side = qMin(width(), height());
    painter.setViewport((width() - side) / 2,
                        (height() - side) / 2,
                        side, side);
    painter.setWindow(-50, -50, 100, 100);
    draw(&painter);
}

void OvenTimer::draw(QPainter *painter){
    static const int triangle[3][2] = {
        {-2, -49}, {2, -49}, {0, -47}
    };
    QPen thickPen(palette().foreground(), 1.5);
    QPen thinPen(palette().foreground(), 0.5);
    QColor niceBlue(150, 150, 200);

    painter->setPen(thinPen);
    painter->setBrush(palette().foreground());
    painter->drawPolygon(QPolygon(3, &triangle[0][0]));

    QConicalGradient coneGradient(0, 0, -90.0);
    coneGradient.setColorAt(0.0, Qt::darkGray);
    coneGradient.setColorAt(0.2, niceBlue);
    coneGradient.setColorAt(0.5, Qt::white);
    coneGradient.setColorAt(1.0, Qt::darkGray);

    painter->setBrush(coneGradient);
    painter->drawEllipse(-46, -46, 92, 92);

    QRadialGradient haloGradient(0, 0, 20, 0, 0);
    haloGradient.setColorAt(0.0, Qt::lightGray);
    haloGradient.setColorAt(0.8, Qt::darkGray);
    haloGradient.setColorAt(0.9, Qt::white);
    haloGradient.setColorAt(1.0, Qt::black);

    painter->setPen(Qt::NoPen);
    painter->setBrush(haloGradient);
    painter->drawEllipse(-20, -20, 40, 40);

    QLinearGradient knobGradient(-7, -25, 7, -25);
    knobGradient.setColorAt(0.0, Qt::black);
    knobGradient.setColorAt(0.2, niceBlue);
    knobGradient.setColorAt(0.3, Qt::lightGray);
    knobGradient.setColorAt(0.8, Qt::white);
    knobGradient.setColorAt(1.0, Qt::black);

    painter->rotate(duration() * DegreesPerSecond);
    painter->setBrush(knobGradient);
    painter->setPen(thinPen);
    painter->drawRoundedRect(-7, -25, 14, 50, 99, 49);

    for(int i = 0; i <= MaxMinutes; ++i){
        painter->save();
        painter->rotate(-i * DegreesPerMinute);
        if(i % 5 == 0){
            painter->setPen(thickPen);
            painter->drawLine(0, -41, 0, -44);
            painter->drawText(-15, -41, 30, 30,
                              Qt::AlignHCenter | Qt::AlignTop,
                              QString::number(i));
        }else{
            painter->setPen(thinPen);
            painter->drawLine(0, -42, 0, -44);
        }
        painter->restore();
    }
}

这个例子相当综合,上面所说的几乎所有的功能都使用到了,但是理解起来有些吃力,慢慢的看.

3.绘制图像

Qt中关于图像的类有很多,比如QImage,QPixmap等,使用的时候也比较简单,就不多说了.

总结:博客写的比较简单,因为自己目前的理解也比较浅显,只是把最基础的一个概念给理了一下,这只是刚开始的学习,随着学习的不但深入,我会在修订这些之前的博客,完善自己的理解.Qt中的图形绘制属于比较困难的一个部分,设计的领域也比较多,需要有一些物理方面的知识作为背景,目前我手头在写一个'图形编辑'的小程序,基本功能已经具备,还在完善,后期会把代码贴出来.