至此已经绘制出了所有的图形。
接下来讲解画笔、画刷的功能
1. 画笔设置
前面绘制时,使用的是默认的画笔,接下来学习画笔和画刷的设置了,本节先讲解画笔的设置
Qt中画笔的类是QPen,QPainter是有一个默认的画笔的。我们也可以设置一个自定义的画笔给它
1.1 画笔 API
可以设置画笔的线宽、颜色、样式、连接、末端等的样式,与画笔相关的API,如下:
// 宽度
int width() const;
void setWidth(int width);
qreal widthF() const;
void setWidthF(qreal width);
// 颜色
QColor color() const;
void setColor(const QColor &color);
// 样式
Qt::PenStyle style() const;
void setStyle(Qt::PenStyle style);
// JoinStyle
Qt::PenJoinStyle joinStyle() const;
void setJoinStyle(Qt::PenJoinStyle style);
// CapStyle
Qt::PenCapStyle capStyle() const;
void setCapStyle(Qt::PenCapStyle style)
说明:Qt::PenStyle、Qt::PenJoinStyle、Qt::PenCapStyle,都是枚举,请查看官方文档看效果!
1.2 实现画笔功能
接下来具体实现画笔设置功能。
首先,来到widget.cpp中,实现以下两个函数:
#include <QColorDialog>
void Widget::onBtnPenColorClicked() {
// 获取颜色
QColor color = QColorDialog::getColor(QColor(255, 0, 0), this, "画笔颜色");
if (!color.isValid()) {
return;
}
// 回显画笔颜色
QPalette pal = ui->btnPenColor->palette();
pal.setColor(QPalette::Button, color);
ui->btnPenColor->setPalette(pal);
ui->btnPenColor->setAutoFillBackground(true);
ui->btnPenColor->setFlat(true);
// 设置颜色
penChanged();
}
void Widget::penChanged() {
QPen pen;
// 设置画笔宽度
pen.setWidth(ui->spinPenWidth->value());
// 设置画笔颜色
QPalette pal = ui->btnPenColor->palette();
QColor color = pal.color(QPalette::Button);
pen.setColor(color);
// 设置画笔样式
int styleIndex = ui->comboPenStyle->currentIndex();
Qt::PenStyle style = (Qt::PenStyle)ui->comboPenStyle->itemData(styleIndex).toInt();
pen.setStyle(style);
// 设置画笔CapStyle
int capIndex = ui->comboPenCap->currentIndex();
Qt::PenCapStyle cap = Qt::PenCapStyle(ui->comboPenCap->itemData(capIndex).toInt());
pen.setCapStyle(cap);
// 设置画笔JoinStyle
int joinIndex = ui->comboPenJoin->currentIndex();
Qt::PenJoinStyle join = Qt::PenJoinStyle(ui->comboPenJoin->itemData(joinIndex).toInt());
pen.setJoinStyle(join);
ui->paintWidget->setPen(pen);
}
然后,来到paintwidget.cpp中,实现setPen()函数,如下:
void PaintWidget::setPen(const QPen pen) {
this->pen = pen;
update();
}
最后,不要忘记在paintEvent()中,将画笔设置给painter,如下:
void PaintWidget::paintEvent(QPaintEvent *event) {
// ...
// 3. 绘制所有图形
painter.setPen(pen);
for (int x = 0; x < w; x += 100) {
for (int y = 0; y < h; y += 100) {
// ...
}
}
}
2. 画刷设置
Qt中画刷的类是QBrush,QPainter是有一个默认的画刷的。我们也可以设置一个自定义的画刷给它
2.1 画刷 API
可以设置画刷的颜色和样式,与画刷相关的API,如下:
// 颜色
const QColor &color() const
void setColor(const QColor &color)
// 样式
Qt::BrushStyle style() const
void setStyle(Qt::BrushStyle style)
说明:Qt::BrushStyle是一个枚举,请查看官方文档看效果!
2.2 实现画刷功能
接下来具体实现画刷设置功能。
首先,来到widget.cpp中,实现以下两个函数:
void Widget::onBtnBrushColorClicked() {
// 获取颜色
QColor color = QColorDialog::getColor(QColor(255, 0, 0), this, "画刷颜色");
if (!color.isValid()) {
return;
}
// 回显颜色
QPalette pal = ui->btnBrushColor->palette();
pal.setColor(QPalette::Button, color);
ui->btnBrushColor->setPalette(pal);
ui->btnBrushColor->setAutoFillBackground(true);
ui->btnBrushColor->setFlat(true);
// 设置颜色
brushChanged();
}
void Widget::brushChanged() {
// 1. 获取画刷颜色
QPalette pal = ui->btnBrushColor->palette();
QColor color = pal.color(QPalette::Button);
// 2. 获取画刷样式
int index = ui->comboBrushStyle->currentIndex();
Qt::BrushStyle style = (Qt::BrushStyle)ui->comboBrushStyle->itemData(index).toInt();
// 3. 设置画刷
if (style == Qt::LinearGradientPattern) {
// 线性渐变
// QLinearGradient linearGradient(0, 0, 100, 100);
QLinearGradient linearGradient(0, 50, 100, 50);
linearGradient.setColorAt(0.0, Qt::white);
linearGradient.setColorAt(0.2, color);
linearGradient.setColorAt(1.0, Qt::black);
ui->paintWidget->setBrush(linearGradient);
} else if (style == Qt::RadialGradientPattern) {
// 线径向渐变
QRadialGradient radialGradient(50, 50, 50, 70, 70);
radialGradient.setColorAt(0.0, Qt::white);
radialGradient.setColorAt(0.2, color);
radialGradient.setColorAt(1.0, Qt::black);
ui->paintWidget->setBrush(radialGradient);
} else if (style == Qt::ConicalGradientPattern) {
// 锥形渐变
QConicalGradient conicalGradient(50, 50, 150);
conicalGradient.setColorAt(0.0, Qt::white);
conicalGradient.setColorAt(0.2, color);
conicalGradient.setColorAt(1.0, Qt::black);
ui->paintWidget->setBrush(conicalGradient);
} else if (style == Qt::TexturePattern) {
// 纹理样式
ui->paintWidget->setBrush(QBrush(QPixmap(":/images/brick.png")));
} else {
// 其他
ui->paintWidget->setBrush(QBrush(color, style));
}
}
然后,来到paintwidget.cpp中,实现setBrush()函数,如下:
void PaintWidget::setBrush(const QBrush brush) {
this->brush = brush;
update();
}
最后,不要忘记在paintEvent()中,将画刷设置给painter,如下:
void PaintWidget::paintEvent(QPaintEvent *event) {
// ...
// 3. 绘制所有图形
painter.setPen(pen);
painter.setBrush(brush);
for (int x = 0; x < w; x += 100) {
for (int y = 0; y < h; y += 100) {
// ...
}
}
}





