至此已经绘制出了所有的图形。
接下来讲解画笔、画刷的功能

1. 画笔设置

前面绘制时,使用的是默认的画笔,接下来学习画笔和画刷的设置了,本节先讲解画笔的设置
Qt中画笔的类是QPenQPainter是有一个默认的画笔的。我们也可以设置一个自定义的画笔给它

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::PenStyleQt::PenJoinStyleQt::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中画刷的类是QBrushQPainter是有一个默认的画刷的。我们也可以设置一个自定义的画刷给它

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) {
            // ...
        }
    }
}