Content Table

画笔

画笔 QPen 用来绘制轮廓,和画笔相关也有很多概念,要理解好画笔也需要下很多工夫的,先看个简单的例子,直观的理解一下什么是 Cap Style, Join Style, Pattern 等上图。:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
void MainWidget::paintEvent(QPaintEvent *) {
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.translate(50, 50);

QPainterPath path;
path.lineTo(100, 100);
path.quadTo(200, 100, 200, 0);

QPen pen1(Qt::darkGray, 20, Qt::SolidLine, Qt::RoundCap, Qt::MiterJoin);
painter.setPen(pen1);
painter.drawPath(path);
painter.drawRect(250, 0, 200, 100);

// 自定义 dash pattern
QPen pen2;
QVector<qreal> dashes;
qreal space = 4;
dashes << 3 << space << 9 << space << 27 << space;
pen2.setDashPattern(dashes);

painter.translate(-30, -30);
painter.setPen(pen2);
painter.drawRect(0, 0, 510, 160);
}

Pen Style

Cap Style 和 Join Style

画笔的宽和矩形的边框

其实我一直不明白设置画笔的宽度后,画出的矩形的边框是怎么计算的,是边框包围住整个图形还是边框整个在图形内部,直到看到下图时才明白(又是截图自 Qt 的帮助文档,里面真是包罗万象啊,希望大家多多阅读 Qt 的帮助文档),以矩形为例(逻辑上来说矩形是没有边框的):

最终绘制出来的矩形的宽度为给定矩形的宽度加上画笔的宽度,高度为给定矩形的高度加上画笔的宽度,就用程序来验证上面的说法吧,放大程序的截图,就能看到各边边框的宽度:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
void MainWidget::paintEvent(QPaintEvent *) {
QPainter painter(this);
painter.translate(40, 40);

painter.setPen(QPen(Qt::darkGray,
31, // 边框宽 31 像素
Qt::SolidLine,
Qt::SquareCap,
Qt::MiterJoin));
painter.drawRect(0, 0, 100, 100);

// 设置边框宽 0 像素
painter.setPen(Qt::NoPen);
painter.setBrush(Qt::darkGray);
painter.drawRect(150, 0, 100, 100);
}

修饰画笔

如果把画笔的宽度设置为 0,是不是画出的图形的边框宽度就是 0,即看不到边框了呢?其实即使设置为 0,但是还是会有一个像素宽度的边框,只不过这个边框不会受 transformation 的影响,例如 scale,文档里是这么说的:

A line width of zero indicates a cosmetic pen. This means that the pen width is always drawn one pixel wide, independent of the transformation set on the painter.

宽度为 0 的画笔称为修饰画笔,当画笔的宽度设置为 0 和 1 在不使用 scale, shear 等 transform 的时候画出的边框看上去是一样的,都是 1 个像素,例如有 scale 的时候,缩放后宽为 0 的边框还是一个像素,宽为 1 的边框根据缩放比例进行缩放:

1
2
3
4
5
6
7
8
9
10
11
void MainWidget::paintEvent(QPaintEvent *) {
QPainter painter(this);
painter.translate(20, 20);
painter.scale(4, 4); // 水平和垂直方向都放大 4 倍

painter.setPen(QPen(Qt::black, 0));
painter.drawRect(0, 0, 40, 40); // 绘制出的矩形边框宽为 1

painter.setPen(QPen(Qt::black, 1));
painter.drawRect(50, 0, 40, 40); // 绘制出的矩形边框宽为 4
}