Windows图形界面(GUI)-QT-C/C++ - Qt图形绘制详解

• 公开视频 -> 链接点击跳转公开课程
  
• 博客首页 -> ​​​链接点击跳转博客主页
  

目次
Qt画图根本
QPainter概述
根本工作流程
画图事故体系
paintEvent事故
重绘机制
笔墨绘制技能
根本笔墨绘制
​编辑
高级笔墨效果
根本图形绘制
线条绘制
​编辑
外形绘制
​编辑
图片处理处罚
根本图片绘制
高级图片效果
​编辑
殊效与动画
渐变效果
​编辑
时钟绘制

---

Qt画图根本

QPainter概述

QPainter是Qt中的核心画图类，提供了高度抽象的2D画图功能。它答应我们在各种装备上举行绘制，包罗：

• 窗口部件(QWidget)
  
• 像素图(QPixmap)
  
• 图像(QImage)
  

根本工作流程

1. void Widget::paintEvent(QPaintEvent* event)
2. {
3.     QPainter painter(this);  
5.     // 设置绘图属性
6.     painter.setRenderHint(QPainter::Antialiasing);
8.     // 进行绘制操作
9.     painter.drawLine(0, 0, 100, 100);
10. }

复制代码

 
画图事故体系

paintEvent事故

paintEvent是Qt中处理处罚绘制的核心事故，在以下环境会被触发：

• 窗口初次表现
  
• 窗口从最小化规复
  
• 窗口被其他窗口遮挡后重新表现
  
• 调用update()或repaint()函数
  

重绘机制

1. class Widget : public QWidget
2. {
3.     Q_OBJECT
5. public:
6.     Widget(QWidget *parent = nullptr);
7.     ~Widget();
9.     void paintEvent(QPaintEvent* event) override
10.     {
11.         QPainter painter(this);
12.         // 绘制代码
13.     }
15.     void updateContent()
16.     {
17.         update();  // 请求重绘，异步
18.         // repaint();  // 立即重绘，同步
19.     }
21. private:
22.     Ui::Widget *ui;
23. };

复制代码

笔墨绘制技能

根本笔墨绘制

1. class Widget : public QWidget
2. {
3.     Q_OBJECT
5. public:
6.     Widget(QWidget *parent = nullptr);
7.     ~Widget();
9.     void paintEvent(QPaintEvent*) override
10.     {
11.         QPainter painter(this);
13.         // 设置字体
14.         QFont font("Arial", 20);
15.         font.setBold(true);
16.         painter.setFont(font);
18.         // 设置颜色
19.         painter.setPen(QColor(255, 0, 0));
21.         // 绘制文本
22.         painter.drawText(rect(), Qt::AlignCenter, "Hello Qt!");
23.     }
25. private:
26.     Ui::Widget *ui;
27. };

复制代码

高级笔墨效果

1.     void paintEvent(QPaintEvent*) override
2.     {
3.         QPainter painter(this);
5.         // 文字阴影效果
6.         QFont font("Times", 40);
7.         painter.setFont(font);
9.         // 绘制阴影
10.         painter.setPen(QColor(0, 0, 0, 127));
11.         painter.drawText(rect().adjusted(2, 2, 2, 2),
12.                          Qt::AlignCenter, "Shadow Text");
14.         // 绘制主文本
15.         painter.setPen(Qt::white);
16.         painter.drawText(rect(), Qt::AlignCenter, "Shadow Text");
17.     }

复制代码

根本图形绘制

线条绘制

1. void paintEvent(QPaintEvent*) override  
2. {  
3.     QPainter painter(this);  
4.    
5.     // 设置画笔  
6.     QPen pen(Qt::red, 2, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);  
7.     painter.setPen(pen);  
8.    
9.     // 绘制各种线条  
10.     painter.drawLine(10, 10, 100, 100);  // 直线  
11.     painter.drawArc(10, 120, 80, 80, 0, 180 * 16);  // 圆弧  
12. }

复制代码

外形绘制

1.    void paintEvent(QPaintEvent*) override  
2.     {  
3.         QPainter painter(this);  
4.         
5.         // 矩形  
6.         painter.fillRect(10, 10, 90, 60, Qt::blue);  
7.         
8.         // 圆形  
9.         painter.drawEllipse(120, 10, 90, 90);  
10.         
11.         // 多边形  
12.         QPolygon polygon;  
13.         polygon << QPoint(10,100) << QPoint(110,100)   
14.                 << QPoint(60,180);  
15.         painter.drawPolygon(polygon);  
16.     }

复制代码

图片处理处罚

根本图片绘制

1. void paintEvent(QPaintEvent*) override  
2. {  
3.     QPainter painter(this);  
4.    
5.     QPixmap pixmap(":/images/example.png");  
6.     painter.drawPixmap(10, 10, pixmap);  
7. }

复制代码

高级图片效果

1.     void paintEvent(QPaintEvent*) override
2.     {
3.         QPainter painter(this);
5.         QPixmap pixmap("C:\\Users\\Administrator\\Desktop\\图形界面-QT.png");
7.         // 图片缩放
8.         QPixmap scaled = pixmap.scaled(200, 200,
9.                                        Qt::KeepAspectRatio,
10.                                        Qt::SmoothTransformation);
12.         // 添加圆形裁剪
13.         QPainterPath path;
14.         path.addEllipse(10, 10, 200, 200);
15.         painter.setClipPath(path);
16.         painter.drawPixmap(10, 10, scaled);
17.     }

复制代码

殊效与动画

渐变效果

1. void paintEvent(QPaintEvent*) override  
2. {  
3.     QPainter painter(this);  
4.    
5.     // 线性渐变  
6.     QLinearGradient gradient(0, 0, width(), height());  
7.     gradient.setColorAt(0, Qt::red);  
8.     gradient.setColorAt(1, Qt::blue);  
9.    
10.     painter.fillRect(rect(), gradient);  
11. }

复制代码

时钟绘制

1. class ClockWidget : public QWidget
2. {
3.     Q_OBJECT
5. public:
6.     explicit ClockWidget(QWidget *parent = nullptr) : QWidget(parent)
7.     {
9.         setFixedSize(400, 400);
11.         QTimer *timer = new QTimer(this);
12.         connect(timer, &QTimer::timeout, this, QOverload<>::of(&ClockWidget::update));
13.         timer->start(1000);
14.     }
16. protected:
17.     void paintEvent(QPaintEvent *event) override
18.     {
19.         Q_UNUSED(event);
21.         QPainter painter(this);
22.         painter.setRenderHint(QPainter::Antialiasing);
24.         painter.translate(width() / 2, height() / 2);
26.         QTime currentTime = QTime::currentTime();
28.         drawClockPlate(&painter);
30.         drawHourHand(&painter, currentTime);
32.         drawMinuteHand(&painter, currentTime);
34.         drawSecondHand(&painter, currentTime);
36.         drawCenterPoint(&painter);
37.     }
39. private:
40.     void drawClockPlate(QPainter *painter)
41.     {
43.         QPen pen(Qt::black);
44.         pen.setWidth(2);
45.         painter->setPen(pen);
47.         painter->setBrush(Qt::white);
49.         painter->drawEllipse(-180, -180, 360, 360);
51.         for (int i = 0; i < 60; ++i) {
53.             painter->save();
55.             painter->rotate(6.0 * i);
57.             if (i % 5 == 0) {
59.                 pen.setWidth(3);
60.                 painter->setPen(pen);
61.                 painter->drawLine(0, -160, 0, -145);
63.                 painter->save();
64.                 painter->rotate(-6.0 * i);
65.                 QFont font("Arial", 15, QFont::Bold);
66.                 painter->setFont(font);
68.                 int num = (i / 5 == 0) ? 12 : i / 5;
70.                 QRect textRect(-20, -190, 40, 40);
71.                 painter->drawText(textRect, Qt::AlignCenter, QString::number(num));
72.                 painter->restore();
73.             } else {
75.                 pen.setWidth(1);
76.                 painter->setPen(pen);
77.                 painter->drawLine(0, -160, 0, -150);
78.             }
80.             painter->restore();
81.         }
82.     }
84.     void drawHourHand(QPainter *painter, const QTime &time)
85.     {
86.         painter->save();
88.         double angle = 30.0 * (time.hour() % 12) + 0.5 * time.minute();
89.         painter->rotate(angle);
91.         QPen pen(Qt::black, 4);
92.         painter->setPen(pen);
94.         painter->drawLine(0, 0, 0, -80);
96.         painter->restore();
97.     }
99.     void drawMinuteHand(QPainter *painter, const QTime &time)
100.     {
101.         painter->save();
103.         double angle = 6.0 * time.minute() + 0.1 * time.second();
104.         painter->rotate(angle);
106.         QPen pen(Qt::blue, 3);
107.         painter->setPen(pen);
109.         painter->drawLine(0, 0, 0, -120);
111.         painter->restore();
112.     }
114.     void drawSecondHand(QPainter *painter, const QTime &time)
115.     {
116.         painter->save();
118.         double angle = 6.0 * time.second();
119.         painter->rotate(angle);
121.         QPen pen(Qt::red, 2);
122.         painter->setPen(pen);
124.         painter->drawLine(0, 20, 0, -140);
126.         painter->restore();
127.     }
129.     void drawCenterPoint(QPainter *painter)
130.     {
131.         painter->setPen(Qt::NoPen);
132.         painter->setBrush(Qt::red);
133.         painter->drawEllipse(-8, -8, 16, 16);
135.         painter->setBrush(Qt::black);
136.         painter->drawEllipse(-4, -4, 8, 8);
137.     }
138. };

复制代码