- 公开视频 -> 链接点击跳转公开课程
- 博客首页 -> 链接点击跳转博客主页
目录
Qt绘图基础
QPainter概述
基本工作流程
绘图事件系统
paintEvent事件
重绘机制
文字绘制技术
基本文字绘制
编辑
高级文字效果
基本图形绘制
线条绘制
编辑
形状绘制
编辑
图片处理
基本图片绘制
高级图片效果
编辑
特效与动画
渐变效果
编辑
时钟绘制
Qt绘图基础
QPainter概述
QPainter是Qt中的核心绘图类，提供了高度抽象的2D绘图功能。它允许我们在各种设备上进行绘制，包括：
- 窗口部件(QWidget)
- 像素图(QPixmap)
- 图像(QImage)
基本工作流程
void Widget::paintEvent(QPaintEvent* event)
{QPainter painter(this); // 设置绘图属性painter.setRenderHint(QPainter::Antialiasing); // 进行绘制操作painter.drawLine(0, 0, 100, 100);
}
绘图事件系统
paintEvent事件
paintEvent是Qt中处理绘制的核心事件，在以下情况会被触发：
- 窗口首次显示
- 窗口从最小化恢复
- 窗口被其他窗口遮挡后重新显示
- 调用update()或repaint()函数
重绘机制
class Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void paintEvent(QPaintEvent* event) override{QPainter painter(this);// 绘制代码}void updateContent(){update(); // 请求重绘，异步// repaint(); // 立即重绘，同步}private:Ui::Widget *ui;
};文字绘制技术
基本文字绘制
class Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void paintEvent(QPaintEvent*) override{QPainter painter(this);// 设置字体QFont font("Arial", 20);font.setBold(true);painter.setFont(font);// 设置颜色painter.setPen(QColor(255, 0, 0));// 绘制文本painter.drawText(rect(), Qt::AlignCenter, "Hello Qt!");}private:Ui::Widget *ui;
};
高级文字效果
void paintEvent(QPaintEvent*) override{QPainter painter(this);// 文字阴影效果QFont font("Times", 40);painter.setFont(font);// 绘制阴影painter.setPen(QColor(0, 0, 0, 127));painter.drawText(rect().adjusted(2, 2, 2, 2),Qt::AlignCenter, "Shadow Text");// 绘制主文本painter.setPen(Qt::white);painter.drawText(rect(), Qt::AlignCenter, "Shadow Text");}
基本图形绘制
线条绘制
void paintEvent(QPaintEvent*) override
{ QPainter painter(this); // 设置画笔 QPen pen(Qt::red, 2, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin); painter.setPen(pen); // 绘制各种线条 painter.drawLine(10, 10, 100, 100); // 直线 painter.drawArc(10, 120, 80, 80, 0, 180 * 16); // 圆弧
}
形状绘制
void paintEvent(QPaintEvent*) override { QPainter painter(this); // 矩形 painter.fillRect(10, 10, 90, 60, Qt::blue); // 圆形 painter.drawEllipse(120, 10, 90, 90); // 多边形 QPolygon polygon; polygon << QPoint(10,100) << QPoint(110,100) << QPoint(60,180); painter.drawPolygon(polygon); }
图片处理
基本图片绘制
void paintEvent(QPaintEvent*) override
{ QPainter painter(this); QPixmap pixmap(":/images/example.png"); painter.drawPixmap(10, 10, pixmap);
}高级图片效果
void paintEvent(QPaintEvent*) override{QPainter painter(this);QPixmap pixmap("C:\\Users\\Administrator\\Desktop\\图形界面-QT.png");// 图片缩放QPixmap scaled = pixmap.scaled(200, 200,Qt::KeepAspectRatio,Qt::SmoothTransformation);// 添加圆形裁剪QPainterPath path;path.addEllipse(10, 10, 200, 200);painter.setClipPath(path);painter.drawPixmap(10, 10, scaled);}
特效与动画
渐变效果
void paintEvent(QPaintEvent*) override
{ QPainter painter(this); // 线性渐变 QLinearGradient gradient(0, 0, width(), height()); gradient.setColorAt(0, Qt::red); gradient.setColorAt(1, Qt::blue); painter.fillRect(rect(), gradient);
}
时钟绘制
class ClockWidget : public QWidget
{Q_OBJECTpublic:explicit ClockWidget(QWidget *parent = nullptr) : QWidget(parent){setFixedSize(400, 400);QTimer *timer = new QTimer(this);connect(timer, &QTimer::timeout, this, QOverload<>::of(&ClockWidget::update));timer->start(1000);}protected:void paintEvent(QPaintEvent *event) override{Q_UNUSED(event);QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.translate(width() / 2, height() / 2);QTime currentTime = QTime::currentTime();drawClockPlate(&painter);drawHourHand(&painter, currentTime);drawMinuteHand(&painter, currentTime);drawSecondHand(&painter, currentTime);drawCenterPoint(&painter);}private:void drawClockPlate(QPainter *painter){QPen pen(Qt::black);pen.setWidth(2);painter->setPen(pen);painter->setBrush(Qt::white);painter->drawEllipse(-180, -180, 360, 360);for (int i = 0; i < 60; ++i) {painter->save();painter->rotate(6.0 * i);if (i % 5 == 0) {pen.setWidth(3);painter->setPen(pen);painter->drawLine(0, -160, 0, -145);painter->save();painter->rotate(-6.0 * i);QFont font("Arial", 15, QFont::Bold);painter->setFont(font);int num = (i / 5 == 0) ? 12 : i / 5;QRect textRect(-20, -190, 40, 40);painter->drawText(textRect, Qt::AlignCenter, QString::number(num));painter->restore();} else {pen.setWidth(1);painter->setPen(pen);painter->drawLine(0, -160, 0, -150);}painter->restore();}}void drawHourHand(QPainter *painter, const QTime &time){painter->save();double angle = 30.0 * (time.hour() % 12) + 0.5 * time.minute();painter->rotate(angle);QPen pen(Qt::black, 4);painter->setPen(pen);painter->drawLine(0, 0, 0, -80);painter->restore();}void drawMinuteHand(QPainter *painter, const QTime &time){painter->save();double angle = 6.0 * time.minute() + 0.1 * time.second();painter->rotate(angle);QPen pen(Qt::blue, 3);painter->setPen(pen);painter->drawLine(0, 0, 0, -120);painter->restore();}void drawSecondHand(QPainter *painter, const QTime &time){painter->save();double angle = 6.0 * time.second();painter->rotate(angle);QPen pen(Qt::red, 2);painter->setPen(pen);painter->drawLine(0, 20, 0, -140);painter->restore();}void drawCenterPoint(QPainter *painter){painter->setPen(Qt::NoPen);painter->setBrush(Qt::red);painter->drawEllipse(-8, -8, 16, 16);painter->setBrush(Qt::black);painter->drawEllipse(-4, -4, 8, 8);}
};
