Qt之图形(QPainter的基本绘图)

简述

Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter、QPaintDevice和QPaintEngine这三个类。

  • QPainter用来执行绘图操作,其提供的API在GUI或QImage、QOpenGLPaintDevice、QWidget和QPaintDevice显示图形(线、形状、渐变等)、文本和图像。
  • QPaintDevice不直接绘制物理显示画面,而利用逻辑界面的中间媒介。例如,绘制矩形图形时,为了将对象绘制到QWidget、QGLPixelBuffer、QImage、QPixmap、QPicture等多种界面中间,必须使用QPaintDevice。
  • QPaintEngine提供了一些接口,可以用于QPainter在不同的设备上进行绘制。

绘图系统由QPainter完成具体的绘制操作,QPainter类提供了大量高度优化的函数来完成GUI编程所需要的大部分绘制工作。它可以绘制一切想要的图形,从最简单的一条直线到其他任何复杂的图形,例如:点、线、矩形、弧形、饼状图、多边形、贝塞尔弧线等。此外,QPainter也支持一些高级特性,例如反走样(针对文字和图形边缘)、像素混合、渐变填充和矢量路径等,QPainter也支持线性变换,例如平移、旋转、缩放。

QPainter可以在继承自QPaintDevice类的任何对象上进行绘制操作。QPainter也可以与QPrinter一起使用来打印文件和创建PDF文档。这意味着通常可以用相同的代码在屏幕上显示数据,也可以生成打印形式的报告。

QPainter一般在部件的绘图事件paintEvent()中进行绘制,首先创建QPainter对象,然后进行图形的绘制,最后记得销毁QPainter对象。当窗口程序需要升级或者重新绘制时,调用此成员函数。使用repaint()和update()后,调用函数paintEvent()。

下面通过简单的示例来介绍成员函数paintEvent()的使用方法。

  • 简述
  • 绘制文本
    • 效果
    • 源码
  • 绘制直线
    • 效果
    • 源码
  • 绘制矩形
    • 效果
    • 源码
  • 绘制弧线
    • 效果
    • 源码
  • 绘制椭圆
    • 效果
    • 源码
  • 绘制多边形
    • 效果
    • 源码
  • 绘制图片
    • 效果
    • 源码
  • 总结

绘制文本

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);
    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));

    // 设置字体:微软雅黑、点大小50、斜体
    QFont font;
    font.setFamily("Microsoft YaHei");
    font.setPointSize(50);
    font.setItalic(true);
    painter.setFont(font);

    // 绘制文本
    painter.drawText(rect(), Qt::AlignCenter, "Qt");
}

首先为该部件创建了一个QPainter对象,用于后面的绘制。使用setPen()来设置画笔的颜色(淡蓝色)。通过使用QFont来构建我们想要的字体,setFamily()设置字体为微软雅黑、setPointSize()设置点大小30、setItalic()设置斜体, 然后通过setFont()来设置字体,最后调用drawText()来实现文本的绘制,这里的rect()是指当前窗体的显示区域,Qt::AlignCenter指文本居中绘制。

绘制直线

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);
    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));
    // 绘制直线
    painter.drawLine(QPointF(0, height()), QPointF(width() / 2, height() / 2));
}

首先我们通过setRenderHint()来设置反走样,要么绘制出来的线条会出现锯齿,调用setPen()来设置画笔颜色(淡蓝色)。最后调用drawLine()来实现直线的绘制,其中QPointF(0, height())是指直线的起点坐标、QPointF(width() / 2, height() / 2)是指直线的终点坐标。

绘制矩形

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置画笔颜色、宽度
    painter.setPen(QPen(QColor(0, 160, 230), 2));
    // 设置画刷颜色
    painter.setBrush(QColor(255, 160, 90));
    painter.drawRect(50, 50, 160, 100);
}

首先我们使用setPen()来设置画笔颜色(淡蓝色)、宽度(2像素),用来设置矩形区域的边框。然后使用setBrush()来设置画刷颜色(橙色),用来填充矩形区域,最后调用drawRect()来实现矩形的绘制,其中参数依次顺序为x、y、w、h,是指区域从x为50,y为50的坐标点起,宽度为160,高度为100的矩形。

绘制弧线

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    // 矩形
    QRectF rect(90.0, 90.0, 80.0, 90.0);
    // 起始角度
    int startAngle = 30 * 16;
    // 跨越度数
    int spanAngle = 120 * 16;

    QPainter painter(this);

    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 设置画笔颜色、宽度
    painter.setPen(QPen(QColor(0, 160, 230), 2));

    // 绘制弧线
    painter.drawArc(rect, startAngle, spanAngle);
}

画弧线时,角度被分成了十六分之一,就是说,如果要30度,就需是30*16。它有起始角度和跨度,还有位置矩形,所以,要想画出自己想要的弧线,就需要大概估算出各个参数的预估值。

绘制椭圆

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 设置画笔颜色、宽度
    painter.setPen(QPen(QColor(0, 160, 230), 2));

    // 绘制椭圆
    painter.drawEllipse(QPointF(120, 60), 50, 20);

    // 设置画刷颜色
    painter.setBrush(QColor(255, 160, 90));

    // 绘制圆
    painter.drawEllipse(QPointF(120, 140), 40, 40);
}

这里我们绘制了一个椭圆和一个圆形,都是调用drawEllipse接口,我们可以很轻易的发现,如果为椭圆的时候,后面两个参数不一样,圆形则相同。首先我们来看第一个参数QPointF是指椭圆的中心点相对当前窗体QPoint(0, 0)点的位置,后面的参数指椭圆的x轴及y轴的半径。

绘制多边形

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));

    // 各个点的坐标
    static const QPointF points[4] = {QPointF(30, 40), QPointF(60, 150), QPointF(150, 160), QPointF(220, 100)};

    // 绘制多边形
    painter.drawPolygon(points, 4);
}

首先我们顶一个个坐标点的位置,这里有四个点,分别为:QPointF(30, 40)、QPointF(60, 150)、QPointF(150, 160)、 QPointF(220, 100),然后调用drawPolygon将各个点连接起来,绘制为多边形。

绘制图片

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 绘制图标
    painter.drawPixmap(rect(), QPixmap(":/Images/logo"));
}

通过drawPixmap()来绘制图片,我们可以指定图片绘制的区域QRect,这里为整个界面的区域,当界面伸缩的时候,图片也会跟着伸缩。

总结

基本的文本、直线、矩形、椭圆、多边形、图片的绘制已经分享完了,还有一些细节我们没有讲解,关于其它图形的绘制也大同小异,这些我们都在后面做详细的讲解。

时间: 2024-10-31 09:05:44

Qt之图形(QPainter的基本绘图)的相关文章

[Qt教程] 第19篇 2D绘图(九)图形视图框架(上)

[Qt教程] 第19篇 2D绘图(九)图形视图框架(上) 楼主  发表于 2013-5-4 15:26:20 | 查看: 1798| 回复: 26 图形视图框架(上) 版权声明 导语 在前面讲的基本绘图中,我们可以自己绘制各种图形,并且控制它们.但是,如果需要同时绘制很多个相同或不同的图形,并且要控制它们的移动,检测它们的碰撞和叠加:或者我们想让自己绘制的图形可以拖动位置,进行缩放和旋转等操作.实现这些功能,要是还使用以前的方法,那么会十分困难.解决这些问题,可以使用Qt提供的图形视图框架.  

[Qt教程] 第20篇 2D绘图(十)图形视图框架(下)

[Qt教程] 第20篇 2D绘图(十)图形视图框架(下) 楼主  发表于 2013-5-4 15:43:02 | 查看: 861| 回复: 0 图形视图框架(下) 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 环境:Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目录 三.场景(QGraphicsScene) (一)场景层 (二)索引算法 (三)边界矩形 (四)图形项查找 (五)事件处理和传播 (

[Qt教程] 第11篇 2D绘图(一)绘制简单图形

[Qt教程] 第11篇 2D绘图(一)绘制简单图形 楼主  发表于 2013-4-23 12:52:35 | 查看: 1398| 回复: 5 绘制简单图形 版权声明 该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处! 导语 Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类.其中QPainter用来执行绘图操作:QPaintDevice提供绘图设备,它是一个二

[Qt教程] 第17篇 2D绘图(七)涂鸦板

[Qt教程] 第17篇 2D绘图(七)涂鸦板 楼主  发表于 2013-5-2 21:37:41 | 查看: 1255| 回复: 16 涂鸦板 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语        通过前面几节的学习,大家应该已经对Qt中2D绘图有了一定的认识,这一节我们将应用前面讲到的内容,编写一个简单的涂鸦板程序,这一节只是实现最基本的鼠标画线功能. 环境:Windows Xp + Qt 4.8.4+QtCreat

[Qt教程] 第13篇 2D绘图(三)绘制文字

[Qt教程] 第13篇 2D绘图(三)绘制文字 楼主  发表于 2013-4-25 23:04:46 | 查看: 720| 回复: 0 绘制文字 版权声明 该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处! 导语 Qt中除了绘制图形以外,还可以使用QPainter::darwText()函数来绘制文字,也可以使用QPainter::setFont()设置文字所使用的字体,使用QPainter::fontInfo()函数可以获取字体的信息,它返回QFontInfo类对象.在绘

[Qt教程] 第18篇 2D绘图(八)双缓冲绘图

[Qt教程] 第18篇 2D绘图(八)双缓冲绘图 楼主  发表于 2013-5-2 22:07:23 | 查看: 789| 回复: 1 双缓冲绘图 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 在前面一节中,讲述了如何实现简单的涂鸦板,这一次我们将实现在涂鸦板上绘制图形,这里以矩形为例进行讲解.在后面还会提出双缓冲绘图的概念. 环境:Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目录 一.绘制矩

[Qt教程] 第16篇 2D绘图(六)坐标系统

[Qt教程] 第16篇 2D绘图(六)坐标系统 楼主  发表于 2013-5-2 20:08:12 | 查看: 738| 回复: 0 坐标系统 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 前面一节我们讲解了图片的显示,其中很多地方都用到了坐标的变化.这一节我们将讲解Qt的坐标系统,分为两部分来讲解:第一部分主要讲解前面一节的那几个函数,它们分别是translate()平移变换.scale()比例变换.rotate()旋转变

[Qt教程] 第12篇 2D绘图(二)渐变填充

[Qt教程] 第12篇 2D绘图(二)渐变填充 楼主  发表于 2013-4-23 17:59:31 | 查看: 689| 回复: 1 渐变填充 版权声明 该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处! 导语 在前一节提到了在画刷中可以使用渐变填充.QGradient类就是用来和QBrush一起指定渐变填充的.Qt现在支持三种类型的渐变填充: 线性渐变(linear gradient)在开始点和结束点之间插入颜色: 辐射渐变(radial gradient)在焦点和环绕

[Qt教程] 第15篇 2D绘图(五)绘制图片

[Qt教程] 第15篇 2D绘图(五)绘制图片 楼主  发表于 2013-5-2 17:59:00 | 查看: 886| 回复: 3 绘制图片 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 Qt提供了四个类来处理图像数据:QImage.QPixmap.QBitmap和QPicture,它们也都是常用的绘图设备.其中QImage主要用来进行I/O处理,它对I/O处理操作进行了优化,而且也可以用来直接访问和操作像素:QPixma

Word 2007插入自选图形时自动创建绘图画布

默认情况下,在Word2007文档中插入自选图形时将在文本编辑区直接编辑.用户可以设置插入自选图形时自动创建绘图画布,从而在绘图画布中编辑自选图形,操作步骤如下所述: 第1步,打开Word2007文档窗口,依次单击"Office按钮"→"Word选项"按钮,如图2012040303所示. 图2012040303 单击"Word选项"按钮 第2步,打开"Word选项"对话框,切换到"高级"选项卡.在"