13. 绘图和样式表¶

Qt 5中的图形主要通过命令式QPainter API或Qt的声明性UI语言Qt Quick及其场景图形后端来完成， Qt的图形功能还包括对打印的支持，以及对各种图像格式的加载和保存。

Qt GUI界面提供了OpenGL和OpenGL ES集成，2D图形，基本图像，字体和文本等类，使用这些类我们可以方便的绘制图形。本章将介绍下在窗口绘制二维图形以及控件的样式。

Qt的绘图可以使用相同的API在屏幕和打印设备上绘画，并且主要基于 QPainter， QPaintDevice 和 QPaintEngine 类。

QPainter 用于执行绘制操作，可以看作是画家；
QPaintDevice 是二维空间的抽象，想象成画板，就是绘图设备，常见的绘图设备有QWidget、QPixmap、QPicture等；
QPaintEngine 提供了绘制器用来在不同类型的绘图设备上绘制的接口。

QPaintDevice 相关类的继承关系：

QWidget是所有界面组件的基类，常见的绘图设备。
QImage、QPixmap、QBitmap和QPicture这些类用于处理图像数据，其中QImage是针对I/O和直接像素访问和操作进行设计和优化的类；QPixmap是针对屏幕上显示的图像进行设计和优化的类； QBitmap是一个继承自QPixmap的便捷类，确保深度为1；QPicture类是一个绘画设备，可以记录和回放QPainter命令。
QSvgGenerator 是用于创建SVG图形的绘制设备，可缩放矢量图形（scalable vector graphics）是一种图片格式。
QOpenGLPaintDevice 是用于渲染到当前OpenGL（ES）2.0的绘制设备, QPainter将调用OpenGL绘制到QOpenGLPaintDevice实例。
QPagePaintDevice是支持多个页面的绘图设备类。

13.1. QPainter绘图¶

Qt的二维绘制功能是使用QPainter在绘图设备上绘制，提供了高度优化的功能，可以完成大多数图形GUI程序所需的功能，它可以绘制从简单的线条到复杂的形状的所有内容，它还可以绘制对齐的文本和像素图。通常，它在逻辑坐标系中绘制，但也可以进行逻辑坐标到物理坐标的转换。

QPainter可以对继承QPaintDevice类的任何对象进行操作。

QPainter的常见用法是在控件的绘画事件中：构造和自定义（例如，设置笔或画笔）Painter，然后进行图形绘制。

13.1.1. 基本概念¶

13.1.1.1. 绘图事件¶

QWidget类有一个事件处理函数paintEvent，当组件需要重新绘制时，系统会自动调用整函数。 QPainter的常见用途就是在窗口的绘画事件（paintEvent）中，在绘图事件处理函数中创建QPainter对象，然后使用这个QPainter在绘图设备上绘制。例如：

void MainWindow::paintEvent(QPaintEvent *event)
{
    // 创建与绘制设备关联的对象QPainter
    QPainter painter(this);
    // 绘制图形，先创建一个画笔，设置颜色等，然后在窗口中心绘制文本"LubanCat"
    painter.setPen(Qt::red);
    painter.drawText(rect(), Qt::AlignCenter, "LubanCat"); //绘制文本
}

QPainter类除了绘制图像，还可以自定义QPainter设置及其渲染质量，支持剪辑功能。此外，还可以通过指定QPainter的构图模式来控制不同形状如何合并在一起。

13.1.1.2. 颜色¶

Qt中的任何颜色都由支持RGB，HSV和CMYK颜色模型的QColor类表示。通常使用 QColor RGB(R,G,B) 来指定颜色。 QColor还支持alpha混合轮廓和填充（指定透明效果），并且该类与平台和设备无关（使用QColormap类将颜色映射到硬件）。

// Specify semi-transparent red
painter.setBrush(QColor(255, 0, 0, 127));
painter.drawRect(0, 0, width()/2, height());

// Specify semi-transparent blue
painter.setBrush(QColor(0, 0, 255, 127));
painter.drawRect(0, 0, width(), height()/2);

预定义的颜色

QColorConstants命名空间中有20个预定义的QColor对象，包括黑色，白色，原色和辅助色，这些颜色的较暗版本以及三种灰度。

brush.setColor(Qt::blue);
pen.setColor(Qt::red);

13.1.1.3. 窗口坐标¶

我们通常用x轴y轴组成的平面坐标系来限定2D绘图，Qt中坐标系由QPainter类控制。

绘画设备的默认坐标系的原点位于左上角。该X值增加向右和ÿ值向下增加。在基于像素的设备上，默认单位是一个像素。

逻辑QPainter坐标到物理QPaintDevice坐标的映射由QPainter的变换矩阵，视口和窗口处理所决定。默认情况下，逻辑坐标系和物理坐标系重合。

13.1.1.4. 窗口和视口¶

在使用QPainter进行绘制时，我们使用逻辑坐标指定点，然后将其转换为绘画设备的物理坐标，也就是可以通过窗口和视口来设置组件大小位置。

视口是基于QPaintDevice类组件坐标实现，是物理坐标，可以通过setViewport()函数设置；窗口是基于自身的逻辑坐标，不是真实坐标，可以通过setWindow()函数设置。

逻辑坐标到物理坐标的映射由QPainter的world transformation worldTransform()以及QPainter的viewport()和window()处理。视口表示指定任意矩形的物理坐标。“窗口”在逻辑坐标中描述相同的矩形。默认情况下，逻辑坐标系和物理坐标系重合，相当于绘制设备的矩形。

使用窗口-视口转换，可以使逻辑坐标系符合您的首选项。该机制还可用于使绘图代码独立于绘图设备。例如，可以通过调用QPainter:：setWindow()函数使逻辑坐标从（-50，-50）扩展到(50，50)，其中(0，0)位于中心：

QPainter painter(this);
qp->setWindow(QRect(-50, -50, 100, 100));

当QPainter初始化的时候，视口和窗口的坐标是一致的，通过上面setWindow函数设置，逻辑坐标(-50，-50)对应于绘图设备的物理坐标(0，0)，与绘画设备无关，绘画代码将始终在指定的逻辑坐标上运行。

13.1.2. 绘画相关类¶

13.1.2.1. QPen¶

QPen 类用于设置绘制时的线条特性，控制线条的颜色，宽度，线型等。

笔的宽度可以指定为整数（width（））和浮点（widthF（））精度,线宽为零表示修饰笔,这意味着笔的宽度始终绘制为一个像素宽，与QPainter上设置的变换无关。使用*setColor()* , setWidth() 函数分别设置颜色和线宽。

PenStyle

QPen可以设置其线条样式，通过setStyle()函数设置，参数是枚举类型Qt::PenStyle：

样式	值	描述
Qt::NoPen	0	完全没有线。例如，QPainter::drawRect（）填充但不绘制任何边界线
Qt::SolidLine	1	一条简单的宽线
Qt::DashLine	2	短划线隔开几个像素，虚线
Qt::DotLine	3	点分开几个像素，点划线
Qt::DashDotLine	4	交替的点和破折号
Qt::DashDotDotLine	5	一个破折号，两个点，一个破折号，两个点
Qt::CustomDashLine	6	使用QPainterPathStroker::setDashPattern（）定义的自定义模式

除了上面基本的样式，用户还可以自定义线条样式，需要使用函数setDashOffset(qreal offset)和setDashPattern(const QVector<qreal> &pattern)函数。

PenCapStyle

使用函数setCapStyle()设置线条的端点样式，参数是枚举Qt::PenCapStyle，它仅适用于宽线(宽度为1或更大)。在Qt的 Qt:: PenCapStyle 枚举提供了以下样式：

样式	值	描述
Qt::FlatCap	0x00	一个方形的线条端，不覆盖线条的端点
Qt::SquareCap	0x10	一个方形的线条端，覆盖线条的端点并延伸1/2的线宽长度
Qt::RoundCap	0x20	一个圆角的线条端

PenJoinStyle

线条连接样式定义了如何使用QPainter绘制两条连接线之间的连接。连接样式仅适用于宽线(宽度为1或更大)。在Qt的 Qt:: PenJoinStyle 枚举提供了以下样式，setJoinStyle()设置：

样式	值	描述
Qt::MiterJoin	0x00	线连接的外边缘延伸成一定角度相交，并填充
Qt::BevelJoin	0x40	两条线之间的三角形缺口,直接用线连接填充
Qt::RoundJoin	0x80	连接之间缺口，用圆弧连接填充
Qt::SvgMiterJoin	0x100	与SVG 1.2 Tiny规范中的斜接定义相对应的斜接

13.1.2.2. QBrush¶

QBrush对象用于设置QPainter绘制时一个区域的填充效果，具有样式，颜色，渐变和纹理等属性。

QBrush使用setColor()设置笔刷颜色，setStyle()设置笔刷样式，setTexture()设置图片作为笔刷。

笔刷样式使用 Qt::BrushStyle 枚举定义填充图案，Qt支持的画笔样式如下:

样式	值	描述
Qt::NoBrush	0	没有画笔图案
Qt::SolidPattern	1	颜色均匀,单一颜色填充
Qt::Dense1Pattern	2	极其密集的画笔图案
Qt::Dense2Pattern	3	非常密集的画笔图案
Qt::Dense3Pattern	4	有点密集的画笔图案
Qt::Dense4Pattern	5	半密实的画笔图案
Qt::Dense5Pattern	6	有点稀疏的画笔图案
Qt::Dense6Pattern	7	非常稀疏的画笔图案
Qt::Dense7Pattern	8	极稀疏的画笔图案
Qt::HorPattern	9	水平线填充
Qt::VerPattern	10	垂直线填充
Qt::CrossPattern	11	跨越水平和垂直线
Qt::BDiagPattern	12	向后的对角线
Qt::FDiagPattern	13	向前的对角线
Qt::DiagCrossPattern	14	交叉对角线
Qt::LinearGradientPattern	15	线性渐变（使用专用的QBrush构造函数设置）
Qt::ConicalGradientPattern	17	锥形渐变（使用专用的QBrush构造函数设置）
Qt::RadialGradientPattern	16	辐射形渐变（使用专用的QBrush构造函数设置）
Qt::TexturePattern	24	自定义填充(请参阅QBrush::setTexture()函数)

其效果如下：

13.1.2.3. QGradient¶

QGradient 和QBrush组合使用，可以实现包括从均匀颜色到非常稀疏的图案的基本图案，各种线条组合，渐变填充和纹理等等效果。

Qt提供了三种渐变填充类：QLinearGradient，QConicalGradient和QRadialGradient，这三种都继承自QGradient。

QLinearGradient 是线性渐变，指定一个起点和颜色，一个终点和颜色，起点到终点的颜色按线性插值计算，得到渐变的填充颜色。其中，还可以知道中间点的颜色。
QRadialGradient 是辐射形渐变，有简单的辐射渐变和扩展的辐射渐变两种方式，简单的方式是在圆内一个焦点和一个端点之间渐变，扩展辐射是在一个焦点圆和一个中心圆之间渐变。
QConicalGradient 是圆锥渐变，围绕一个中心点逆时针渐变。

三种渐变的效果：

13.1.3. QPainter绘图基础图形¶

QPainter提供了许多接口用于绘制基础图像，包括点，直线，椭圆等，每个接口函数都有很多参数形式，下面将简单介绍下这些函数。