zoukankan      html  css  js  c++  java
  • 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,这里为整个界面的区域,当界面伸缩的时候,图片也会跟着伸缩。

    总结

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

  • 相关阅读:
    vue使用elementui合并table
    使用layui框架导出table表为excel
    vue使用elementui框架,导出table表格为excel格式
    前台传数据给后台的几种方式
    uni.app图片同比例缩放
    我的博客
    【C语言】取16进制的每一位
    SharePoint Solution 是如何部署的呢 ???
    无效的数据被用来用作更新列表项 Invalid data has been used to update the list item. The field you are trying to update may be read only.
    SharePoint 判断用户在文件夹上是否有权限的方法
  • 原文地址:https://www.cnblogs.com/itrena/p/5938346.html
Copyright © 2011-2022 走看看