Qt新手别怕！用QPainter画个矩形和圆，5分钟搞定你的第一个2D图形

Qt绘图入门5分钟用QPainter画出你的第一个图形第一次打开Qt Creator时面对密密麻麻的菜单和陌生的术语很多新手都会感到无从下手。但别担心今天我们就从最基础的2D绘图开始让你在5分钟内看到自己的第一个图形成果。这就像学习骑自行车——不需要先了解机械原理跨上去踩几脚感受平衡才是最快的入门方式。1. 创建你的第一个绘图项目打开Qt Creator点击左上角的文件→新建文件或项目选择Application→Qt Widgets Application。给项目起个名字比如MyFirstDrawing一路点击下一步直到完成项目创建。提示确保安装Qt时勾选了Widgets模块这是传统桌面GUI开发的基础。你会看到Qt Creator自动生成了几个文件我们重点关注这两个mainwindow.h- 主窗口的头文件mainwindow.cpp- 主窗口的实现文件在mainwindow.h中找到MainWindow类的定义添加以下声明protected: void paintEvent(QPaintEvent *event) override;这告诉Qt当需要绘制窗口时请调用我自定义的paintEvent函数。2. 实现绘图逻辑切换到mainwindow.cpp文件在文件末尾添加paintEvent函数的实现void MainWindow::paintEvent(QPaintEvent *event) { QPainter painter(this); // 设置画笔颜色为红色 painter.setPen(Qt::red); // 在坐标(50,50)处画一个100x80的矩形 painter.drawRect(50, 50, 100, 80); // 设置画刷颜色为半透明蓝色 painter.setBrush(QColor(0, 0, 255, 127)); // 在坐标(200,100)处画一个直径60的圆 painter.drawEllipse(200, 100, 60, 60); }几个关键点解释QPainter painter(this)创建一个在这个窗口上绘图的画家对象setPen设置边框颜色setBrush设置填充颜色drawRect参数依次是x坐标、y坐标、宽度、高度drawEllipse参数是外接矩形的x、y、宽度、高度3. 理解Qt的坐标系Qt的2D绘图使用笛卡尔坐标系但有两点特别之处原点(0,0)在窗口的左上角y轴向下为正方向(0,0) ——→ x | ↓ y这种设计源于计算机显示器的扫描方式。当你调用drawRect(50,50,100,80)时矩形的左上角距离窗口左边50像素顶部50像素矩形宽100像素高80像素4. 颜色和样式进阶Qt提供了多种颜色设置方式最常用的有方法示例说明Qt预定义颜色Qt::red简单快捷RGB构造QColor(255,0,0)红绿蓝分量0-255RGBA构造QColor(255,0,0,127)增加透明度控制试试修改前面的代码给圆形添加一个虚线边框QPen pen(Qt::black); pen.setStyle(Qt::DashLine); painter.setPen(pen); painter.drawEllipse(200, 100, 60, 60);5. 调试技巧和常见问题当你的图形没有按预期显示时可以检查以下几点忘记调用setPen/setBrush图形可能使用默认的黑色或无填充坐标超出窗口范围图形可能绘制在不可见区域没有重写paintEvent绘图代码必须放在这个函数里窗口未刷新可以手动触发重绘update()注意不要在paintEvent外创建QPainter对象也不要在paintEvent中创建QPaintDevice对象。6. 扩展练习画一个笑脸现在你已经掌握了基本图形绘制试着组合使用这些函数画一个简单的笑脸void MainWindow::paintEvent(QPaintEvent *event) { QPainter painter(this); // 画脸黄色圆形 painter.setBrush(Qt::yellow); painter.drawEllipse(100, 100, 200, 200); // 画眼睛两个黑色小圆 painter.setBrush(Qt::black); painter.drawEllipse(150, 150, 30, 30); // 左眼 painter.drawEllipse(220, 150, 30, 30); // 右眼 // 画嘴巴弧线 QRect mouthRect(150, 180, 100, 80); painter.drawArc(mouthRect, 180 * 16, 180 * 16); // 180度到360度的弧线 }运行后你应该能看到一个简单的笑脸图案。这个练习展示了如何通过组合基本图形来创建更复杂的图案。7. 下一步学习方向掌握了基础绘图后你可以继续探索绘制文本painter.drawText()绘制图片painter.drawImage()坐标变换平移、旋转、缩放自定义图形QPainterPath动画效果结合QTimer和update()Qt的绘图系统非常强大几乎可以绘制任何你能想到的2D图形。我第一次成功画出矩形时的兴奋感至今难忘——那种我做到了的成就感正是编程最迷人的部分之一。