Qt5 学习6 之 绘制系统简介、画刷和画笔、坐标系统、绘制设备

绘制系统简介

Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制。整个绘图系统基于QPainter，QPainterDevice和QPaintEngine三个类。

QPainter用来执行绘制的操作；QPaintDevice是一个二维空间的抽象，这个二维空间允许QPainter在其上面进行绘制，也就是QPainter工作的空间；QPaintEngine提供了画笔（QPainter）在不同的设备上进行绘制的统一的接口。QPaintEngine类应用于QPainter和QPaintDevice之间，通常对开发人员是透明的。除非你需要自定义一个设备，否则你是不需要关心QPaintEngine这个类的。我们可以把QPainter理解成画笔；把QPaintDevice理解成使用画笔的地方，比如纸张、屏幕等；而对于纸张、屏幕而言，肯定要使用不同的画笔绘制，为了统一使用一种画笔，我们设计了QPaintEngine类，这个类让不同的纸张、屏幕都能使用一种画笔。

下图给出了这三个类之间的层次结构（出自 Qt API 文档）：

上面的示意图告诉我们，Qt 的绘图系统实际上是，使用QPainter在QPainterDevice上进行绘制，它们之间使用QPaintEngine进行通讯（也就是翻译QPainter的指令）。

下面我们通过一个实例来介绍QPainter的使用：

class PaintedWidget : public QWidget
{
    Q_OBJECT
public:
    PaintedWidget(QWidget *parent = 0);
protected:
    void paintEvent(QPaintEvent *);
};

注意我们重写了QWidget的paintEvent()函数。这或许是我们在理解了 Qt 事件系统之后首次实际应用。接下来就是PaintedWidget的源代码：

PaintedWidget::PaintedWidget(QWidget *parent) :
    QWidget(parent)
{
    resize(800, 600);
    setWindowTitle(tr("Paint Demo"));
}

void PaintedWidget::paintEvent(QPaintEvent *)
{
    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);
}

在构造函数中，我们仅仅设置了窗口的大小和标题。而paintEvent()函数则是绘制的代码。首先，我们在栈上创建了一个QPainter对象，也就是说，每次运行paintEvent()函数的时候，都会重建这个QPainter对象。注意，这一点可能会引发某些细节问题：由于我们每次重建QPainter，因此第一次运行时所设置的画笔颜色、状态等，第二次再进入这个函数时就会全部丢失。有时候我们希望保存画笔状态，就必须自己保存数据，否则的话则需要将QPainter作为类的成员变量。paintEvent() 作为重绘函数，会在需要重绘时由 Qt 自动调用。“需要重绘”可能发生在很多地方，比如组件刚刚创建出来的时候就需要重绘；组件最大化、最小化的时候也需要重新绘制；组件由遮挡变成完全显示的时候也需要等等。

QPainter接收一个QPaintDevice指针作为参数。QPaintDevice有很多子类，比如QImage，以及QWidget。注意回忆一下，QPaintDevice可以理解成要在哪里去绘制，而现在我们希望画在这个组件，因此传入的是 this 指针。

QPainter有很多以 draw 开头的函数，用于各种图形的绘制，比如这里的drawLine()，drawRect()以及drawEllipse()等。当绘制轮廓线时，使用QPainter的pen()属性。比如，我们调用了painter.setPen(Qt::red)将 pen 设置为红色，则下面绘制的矩形具有红色的轮廓线。接下来，我们将 pen 修改为绿色，5 像素宽（painter.setPen(QPen(Qt::green, 5))），又设置了画刷为蓝色。这时候再调用 draw 函数，则是具有绿色 5 像素宽轮廓线、蓝色填充的椭圆。

如果了解 OpenGL，肯定听说过这么一句话：OpenGL 是一个状态机。所谓状态机，就是说，OpenGL 保存的只是各种状态。比如，将画笔颜色设置成红色，那么，除非你重新设置另外的颜色，它的颜色会一直是红色。QPainter也是这样，它的状态不会自己恢复，除非你使用了各种设置函数。因此，如果在上面的代码中，我们在椭圆绘制之后再画一个矩形，它的样式还会是绿色 5 像素的轮廓线以及蓝色的填充，除非你显式地调用了设置函数进行状态的更新。这是大多数绘图系统的实现方式，包括 OpenGL、QPainter以及 Java2D。正因为QPainter是一个状态机，才会引出我们前面曾经介绍过的一个细节问题：由于paintEvent()是需要重复进入的，因此，需要注意第二次进入时，QPainter的状态是不是和第一次一致，否则的话可能会造成闪烁的现象。这个闪烁并不是由于双缓冲的问题，而是由于绘制状态的快速切换。

画刷和画笔

Qt 绘图系统定义了两个绘制时使用的关键属性：画刷和画笔。前者使用QBrush描述，大多用于填充；后者使用QPen描述，大多用于绘制轮廓线。

QBrush定义了QPainter的填充模式，具有样式、颜色、渐变以及纹理等属性。

画刷的style()定义了填充的样式，使用Qt::BrushStyle枚举，默认值是Qt::NoBrush，也就是不进行任何填充。我们可以从下面的图示中看到各种填充样式的区别：
画刷的color()定义了填充模式的颜色。这个颜色可以是 Qt 预定义的颜色常量，也就是Qt::GlobalColor，也可以是任意QColor对象。

画刷的gradient()定义了渐变填充。这个属性只有在样式是Qt::LinearGradientPattern、Qt::RadialGradientPattern或者Qt::ConicalGradientPattern之一时才有效。渐变可以由QGradient对象表示。Qt 提供了三种渐变：QLinearGradient、QConicalGradient和QRadialGradient，它们都是QGradient的子类。我们可以使用如下代码片段来定义一个渐变的画刷：

QRadialGradient gradient(50, 50, 50, 50, 50);
gradient.setColorAt(0, QColor::fromRgbF(0, 1, 0, 1));
gradient.setColorAt(1, QColor::fromRgbF(0, 0, 0, 0));

QBrush brush(gradient);

当画刷样式是 Qt::TexturePattern时，texture()定义了用于填充的纹理。注意，即使你没有设置样式为Qt::TexturePattern，当你调用setTexture()函数时，QBrush会自动将style()设置为Qt::TexturePattern。

QPen定义了用于QPainter应该怎样画线或者轮廓线。画笔具有样式、宽度、画刷、笔帽样式和连接样式等属性。画笔的样式style()定义了线的样式。画刷brush()用于填充画笔所绘制的线条。笔帽样式capStyle()定义了使用QPainter绘制的线的末端；连接样式joinStyle()则定义了两条线如何连接起来。画笔宽度width()或widthF()定义了画笔的宽。注意，不存在宽度为 0 的线。假设你设置 width 为 0，QPainter依然会绘制出一条线，而这个线的宽度为 1 像素。也就是说，画笔宽度通常至少是 1 像素。

这么多参数既可以在构造时指定，也可以使用 set 函数指定，完全取决于你的习惯，例如：

QPainter painter(this);
QPen pen(Qt::green, 3, Qt::DashDotLine, Qt::RoundCap, Qt::RoundJoin);
painter.setPen(pen);

等价于

QPainter painter(this);
QPen pen;  // creates a default pen

pen.setStyle(Qt::DashDotLine);
pen.setWidth(3);
pen.setBrush(Qt::green);
pen.setCapStyle(Qt::RoundCap);
pen.setJoinStyle(Qt::RoundJoin);

painter.setPen(pen);

坐标系统

在经历过实际操作，以及前面一节中我们见到的那个translate()函数之后，我们可以详细了解下 Qt 的坐标系统了。泛泛而谈坐标系统，有时候会觉得枯燥无味，难以理解，好在现在我们已经有了基础。

坐标系统是由QPainter控制的。我们前面说过，QPaintDevice、QPaintEngine和QPainter是 Qt 绘制系统的三个核心类。QPainter用于进行绘制的实际操作；QPaintDevice是那些能够让QPainter进行绘制的“东西”（准确的术语叫做，二维空间）的抽象层（其子类有QWidget、QPixmap、QPicture、QImage和QPrinter等）；QPaintEngine提供供QPainter使用的用于在不同设备上绘制的统一的接口。

由于QPaintDeice是进行绘制的对象，因此，所谓坐标系统，也就是QPaintDevice上面的坐标。默认坐标系统位于设备的左上角，也就是坐标原点 (0, 0)。x 轴方向向右；y 轴方向向下。在基于像素的设备上（比如显示器），坐标的默认单位是像素，在打印机上则是点（1/72 英寸）。

将QPainter的逻辑坐标与QPaintDevice的物理坐标进行映射的工作，是由QPainter的变换矩阵（transformation matrix）、视口（viewport）和窗口（window）完成的。如果你不理解这些术语，可以简单了解下有关图形学的内容。实际上，对图形的操作，底层的数学都是进行的矩阵变换、相乘等运算。

在 Qt 的坐标系统中，每个像素占据 1×1 的空间。你可以把它想象成一张方格纸，每个小格都是1个像素。方格的焦点定义了坐标，也就是说，像素 (x, y) 的中心位置其实是在 (x + 0.5, y + 0.5) 的位置上。这个坐标系统实际上是一个“半像素坐标系”。我们可以通过下面的示意图来理解这种坐标系：
我们使用一个像素的画笔进行绘制，可以看到，每一个绘制像素都是以坐标点为中心的矩形。注意，这是坐标的逻辑表示，实际绘制则与此不同。因为在实际设备上，像素是最小单位，我们不能像上面一样，在两个像素之间进行绘制。所以在实际绘制时，Qt 的定义是，绘制点所在像素是逻辑定义点的右下方的像素。

Qt 同样提供了坐标变换。前面说，图形学大部分算法依赖于矩阵计算，坐标变换便是其中的代表：每一种变换都对应着一个矩阵乘法（如果你想知道学的线性代数有什么用处，这就是应用之一了 ;-P）。我们会以一个实际的例子来了解坐标变换。在此之前，我们需要了解两个函数：QPainter::save()和QPainter::restore()。

前面说过，QPainter是一个状态机。那么，有时我想保存下当前的状态：当我临时绘制某些图像时，就可能想这么做。当然，我们有最原始的办法：将可能改变的状态，比如画笔颜色、粗细等，在临时绘制结束之后再全部恢复。对此，QPainter提供了内置的函数：save()和restore()。save()就是保存下当前状态；restore()则恢复上一次保存的结果。这两个函数必须成对出现：QPainter使用栈来保存数据，每一次save()，将当前状态压入栈顶，restore()则弹出栈顶进行恢复。

void PaintDemo::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.fillRect(10, 10, 50, 100, Qt::red);
    painter.save();
    painter.translate(100, 0); // 向右平移 100px
    painter.fillRect(10, 10, 50, 100, Qt::yellow);
    painter.restore();
    painter.save();
    painter.translate(300, 0); // 向右平移 300px
    painter.rotate(30); // 顺时针旋转 30 度
    painter.fillRect(10, 10, 50, 100, Qt::green);
    painter.restore();
    painter.save();
    painter.translate(400, 0); // 向右平移 400px
    painter.scale(2, 3); // 横坐标单位放大 2 倍，纵坐标放大 3 倍
    painter.fillRect(10, 10, 50, 100, Qt::blue);
    painter.restore();
    painter.save();
    painter.translate(600, 0); // 向右平移 600px
    painter.shear(0, 1); // 横向不变，纵向扭曲 1 倍
    painter.fillRect(10, 10, 50, 100, Qt::cyan);
    painter.restore();
}

Qt 提供了四种坐标变换：平移 translate，旋转 rotate，缩放 scale 和扭曲 shear。在这段代码中，我们首先在 (10, 10) 点绘制一个红色的 50×100 矩形。保存当前状态，将坐标系平移到 (100, 0)，绘制一个黄色的矩形。注意，translate()操作平移的是坐标系，不是矩形。因此，我们还是在 (10, 10) 点绘制一个 50×100 矩形，现在，它跑到了右侧的位置。然后恢复先前状态，也就是把坐标系重新设为默认坐标系（相当于进行translate(-100, 0)），再进行下面的操作。之后也是类似的。由于我们只是保存了默认坐标系的状态，因此我们之后的translate()横坐标值必须增加，否则就会覆盖掉前面的图形。所有这些操作都是针对坐标系的，因此在绘制时，我们提供的矩形的坐标参数都是不变的。
Qt 的坐标分为逻辑坐标和物理坐标。在我们绘制时，提供给QPainter的都是逻辑坐标。之前我们看到的坐标变换，也是针对逻辑坐标的。所谓物理坐标，就是绘制底层QPaintDevice的坐标。单单只有逻辑坐标，我们是不能在设备上进行绘制的。要想在设备上绘制，必须提供设备认识的物理坐标。Qt 使用 viewport-window 机制将我们提供的逻辑坐标转换成绘制设备使用的物理坐标，方法是，在逻辑坐标和物理坐标之间提供一层“窗口”坐标。视口是由任意矩形指定的物理坐标；窗口则是该矩形的逻辑坐标表示。默认情况下，物理坐标和逻辑坐标是一致的，都等于设备矩形。

视口坐标（也就是物理坐标）和窗口坐标是一个简单的线性变换。比如一个 400×400 的窗口，我们添加如下代码：

void PaintDemo::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setWindow(0, 0, 200, 200);
    painter.fillRect(0, 0, 200, 200, Qt::red);
}

我们将窗口矩形设置为左上角坐标为 (0, 0)，长和宽都是 200px。此时，坐标原点不变，还是左上角，但是，对于原来的 (400, 400) 点，新的窗口坐标是 (200, 200)。我们可以理解成，逻辑坐标被“重新分配”。这有点类似于translate()，但是，translate()函数只是简单地将坐标原点重新设置，而setWindow()则是将整个坐标系进行了修改。这段代码的运行结果是将整个窗口进行了填充。

试比较下面两行代码的区别（还是 400×400 的窗口）：

painter.translate(200, 200);
painter.setWindow(-160, -320, 320, 640);

第一行代码，我们将坐标原点设置到 (200, 200) 处，横坐标范围是 [-200, 200]，纵坐标范围是 [-200, 200]。第二行代码，坐标原点也是在窗口正中心，但是，我们将物理宽 400px 映射成窗口宽 320px，物理高 400px 映射成窗口高 640px，此时，横坐标范围是 [-160, 160]，纵坐标范围是 [-320, 320]。这种变换是简单的线性变换。假设原来有个点坐标是 (64， 60)，那么新的窗口坐标下对应的坐标应该是 ((-160 + 64 * 320 / 400), (-320 + 60 * 640 / 400)) = (-108.8, -224)。

下面我们再来理解下视口的含义。还是以一段代码为例：

void PaintDemo::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setViewport(0, 0, 200, 200);
    painter.fillRect(0, 0, 200, 200, Qt::red);
}

这段代码和前面一样，只是把setWindow()换成了setViewport()。前面我们说过，window 代表窗口坐标，viewport 代表物理坐标。也就是说，我们将物理坐标区域定义为左上角位于 (0, 0)，长高都是 200px 的矩形。然后还是绘制和上面一样的矩形。如果你认为运行结果是 1/4 窗口被填充，那就错了。实际是只有 1/16 的窗口被填充。这是由于，我们修改了物理坐标，但是没有修改相应的窗口坐标。默认的逻辑坐标范围是左上角坐标为 (0, 0)，长宽都是 400px 的矩形。当我们将物理坐标修改为左上角位于 (0, 0)，长高都是 200px 的矩形时，窗口坐标范围不变，也就是说，我们将物理宽 200px 映射成窗口宽 400px，物理高 200px 映射成窗口高 400px，所以，原始点 (200, 200) 的坐标变成了 ((0 + 200 * 200 / 400), (0 + 200 * 200 / 400)) = (100, 100)。

现在我们可以用一张图示总结一下逻辑坐标、窗口坐标和物理坐标之间的关系：

逻辑坐标-窗口坐标-物理坐标图示

我们传给QPainter的是逻辑坐标（也称为世界坐标），逻辑坐标可以通过变换矩阵转换成窗口坐标，窗口坐标通过 window-viewport 转换成物理坐标（也就是设备坐标）。

绘制设备

绘图设备是继承QPainterDevice的类。QPaintDevice就是能够进行绘制的类，也就是说，QPainter可以在任何QPaintDevice的子类上进行绘制。现在，Qt 提供了若干这样的类：
QPixmap专门为图像在屏幕上的显示做了优化；QBitmap是QPixmap的一个子类，它的色深限定为1，你可以使用QPixmap的isQBitmap()函数来确定这个QPixmap是不是一个QBitmap。QImage专门为图像的像素级访问做了优化。QPicture则可以记录和重现QPainter的各条命令。下面我们将分两部分介绍这四种绘图设备。

QPixmap继承了QPaintDevice，因此，你可以使用QPainter直接在上面绘制图形。QPixmap也可以接受一个字符串作为一个文件的路径来显示这个文件，比如你想在程序之中打开 png、jpeg 之类的文件，就可以使用QPixmap。使用QPainter::drawPixmap()函数可以把这个文件绘制到一个QLabel、QPushButton或者其他的设备上面。正如前面所说的那样，QPixmap是针对屏幕进行特殊优化的，因此，它与实际的底层显示设备息息相关。注意，这里说的显示设备并不是硬件，而是操作系统提供的原生的绘图引擎。所以，在不同的操作系统平台下，QPixmap的显示可能会有所差别。

QPixmap提供了静态的grabWidget()和grabWindow()函数，用于将自身图像绘制到目标上。同时，在使用QPixmap时，你可以直接使用传值的形式，不需要传指针，因为QPixmap提供了“隐式数据共享”。关于这一点，我们会在以后的章节中详细描述。简单来说，就是一般对于大型数据（图像无疑就是这种“大型数据”），为性能起见，通常会采用传指针的方式，但是由于QPixmap内置了隐式数据共享，所以只要知道传递QPixmap。

前面说过，QBitmap继承自QPixmap，因此具有QPixmap的所有特性。不同之处在于，QBitmap的色深始终为 1。色深这个概念来自计算机图形学，是指用于表现颜色的二进制的位数。我们知道，计算机里面的数据都是使用二进制表示的。为了表示一种颜色，我们也会使用二进制。比如我们要表示 8 种颜色，需要用 3 个二进制位，这时我们就说色深是 3。因此，所谓色深为 1，也就是使用 1 个二进制位表示颜色。1 个位只有两种状态：0 和 1，因此它所表示的颜色就有两种，黑和白。所以说，QBitmap实际上是只有黑白两色的图像数据。由于QBitmap色深小，因此只占用很少的存储空间，所以适合做光标文件和笔刷。

下面我们来看同一个图像文件在QPixmap和QBitmap下的不同表现：

void paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPixmap pixmap("qt-logo.png");
    QBitmap bitmap("qt-logo.png");
    painter.drawPixmap(10, 10, 250, 125, pixmap);
    painter.drawPixmap(270, 10, 250, 125, bitmap);
    QPixmap whitePixmap("qt-logo-white.png");
    QBitmap whiteBitmap("qt-logo-white.png");
    painter.drawPixmap(10, 140, 250, 125, whitePixmap);
    painter.drawPixmap(270, 140, 250, 125, whiteBitmap);
}

这里我们给出了两张 png 图片。qt-logo.png 具有透明背景，qt-logo-white.png 具有白色背景。我们分别使用QPixmap和QBitmap来加载它们。注意看它们的区别：白色的背景在QBitmap中消失了，而透明色在QBitmap中转换成了黑色（“黑色”，记住，QBitmap只有两种颜色：黑色和白色）；其他颜色则是使用点的疏密程度来体现的。

QPixmap使用底层平台的绘制系统进行绘制，无法提供像素级别的操作，而QImage则是使用独立于硬件的绘制系统，实际上是自己绘制自己，因此提供了像素级别的操作，并且能够在不同系统之上提供一个一致的显示形式。

QImage与QPixmap相比，最大的优势在于能够进行像素级别的操作。我们通过上面的示意图可以看到，我们声明一个 3 x 3 像素的QImage对象，然后利用setPixel()函数进行颜色的设置。你可以把QImage想象成一个 RGB 颜色的二维数组，记录了每一像素的颜色。值得注意的是，在QImage上进行绘制时，不能使用QImage::Format_Indexed8这种格式。

最后一种QPicture是平台无关的，因此它可以使用在多种设备之上，比如 svg、pdf、ps、打印机或者屏幕。回忆下我们曾经说的QPaintDevice，实际上是说可以由QPainter进行绘制的对象。QPicture使用系统分辨率，并且可以调整QPainter来消除不同设备之间的显示差异。如果我们要记录下QPainter的命令，首先要使用QPainter::begin()函数，将QPicture实例作为参数传递进去，以便告诉系统开始记录，记录完毕后使用QPainter::end()命令终止。代码示例如下：

QPicture picture;
QPainter painter;
painter.begin(&picture);             // 在 picture 进行绘制
painter.drawEllipse(10, 20, 80, 70); // 绘制一个椭圆
painter.end();                       // 绘制完成
picture.save("drawing.pic");         // 保存 picture

如果我们要重现命令，首先要使用 QPicture::load() 函数进行装载：

QPicture picture;
picture.load("drawing.pic");           // 加载 picture
QPainter painter;
painter.begin(&myImage);               // 在 myImage 上开始绘制
painter.drawPicture(0, 0, picture);    // 在 (0, 0) 点开始绘制 picture
painter.end();                         // 绘制完成

我们也可以直接使用QPicture::play()进行绘制。这个函数接受一个QPainter对象，也就是进行绘制的画笔