28.QT-QPainter介绍

介绍

  • 可以在QPaintDevice类上绘制各种图形
  • QPaintDevice类表示QPainter的绘图设备(画布)
  • QpaintDevice子类有QImage、QOpenGLPaintDevice、QWidget 等
  • 所以, QPainter可以在QImageQOpenGLPaintDeviceQWidget上进行绘制图形
  • QPainter只能在类对象的paintEvent()函数中绘制图形

QPainter类的成员角色有:

  • QPen         : 用于绘制几何图形的边缘,由颜色,宽度,线风格等参数组成
  • QBrush     : 用于填充几何图形的调色板,由颜色和填充风格组成
  • QFont       : 用于文本绘制
  • QPixmap  : 绘制图片,可以加速显示,带有屏幕截图,窗口截图等支持,适合小图片
  • QImage    : 绘制图片,可以直接读取图像文件进行像素访问,适合大图片
  • QBitmap  : QPixmap的一个子类,主要用于显示单色位图
  • QPicture  : 绘图装置,用于记录和重播Qpainter的绘图指令 

具体参考: https://blog.csdn.net/cloud_castle/article/details/26256663

QPainter基础图形绘制相关函数:

绘画圆弧drawArc

QPainter painter(this);

painter.setPen(    QPen(QColor(11,67,127),3));

QRectF rect(40.0, 40.0, 100.0, 100.0);

painter.setRenderHint(QPainter:: Antialiasing, true);  //设置渲染,启动反锯齿

painter.drawArc(rect,30*16,150*16); //绘画角度为30°~(30+150°)

painter.drawPoint(40+50,40+50);     //绘制中心点

绘画椭圆drawElipse

QPainter painter(this);

painter.setRenderHint(QPainter:: Antialiasing, true);  //设置渲染,启动反锯齿

painter.setPen( QPen(QColor(11,67,127),3));

painter.drawEllipse(40.0, 40.0, 100.0, 100.0);   //半径为50的圆

绘画扇形drawPie

QPainter painter(this);
painter.setPen(QPen(QColor(11,67,127),3));

QRectF rect(40.0, 40.0, 100.0, 100.0);

painter.setRenderHint(QPainter:: Antialiasing, true);  //设置渲染,启动反锯齿

painter.drawPie(rect,30*16,150*16); //绘画角度为30°~(30+150°)

绘画弦drawChord

QPainter painter(this);

painter.setPen(QPen(QColor(11,67,127),3));

QRectF rect(40.0, 40.0, 100.0, 100.0);

painter.setRenderHint(QPainter:: Antialiasing, true);  //设置渲染,启动反锯齿

painter.drawChord(rect,30*16,150*16);       //绘画角度为30°~(30+150°)

QPainter-视口/窗口

在Qt中, QPainter可以通过视口和窗口来设置自身组件大小位置.

视口:  基于QPaintDevice类组件的坐标实现的,属于物理坐标,通过setViewport成员函数设置

窗口:  基于自身的逻辑坐标实现的,并不是真实坐标,可以通过setWindow成员函数设置

需要注意的是:

  • Qpainter的坐标是使用的窗口坐标(逻辑坐标)
  • 当QPainter初始化时,视口和窗口坐标默认是相同的,也就是说原点(0,0)在于窗口左上角
  • 所以视口和窗口的最小坐标和最大坐标是从左上到右下的.

示例1-设置原点(0,0)为窗口的(100,100),设置绘画区域为窗口大小为100*100

如下图所示,其中蓝色为视口坐标,红色为窗口坐标:

由于数学Y坐标方向与屏幕Y坐标方向是相反的,所以w保持不变,h = -height

所以对应代码为:

    QPainter painter(this);

    QSize ViewWH(100,100);        //定义视口宽高

    painter.setViewport(50,50,ViewWH.width(),ViewWH.height());

    painter.setWindow(-50,50,ViewWH.width(),-ViewWH.height());

    painter.setBrush(QColor(187,229,253));

    painter.setPen(QPen(QColor(11,67,127),2));   

    painter.drawRect(-50,50,ViewWH.width(),-ViewWH.height()); //窗口背景

    painter.drawLine(-50,0,50,0);       //画X坐标

painter.drawLine(0,-50,0,50);           //画Y坐标 

效果如下:

示例2-在窗口的中心处绘制正弦波

QPainter painter(this);

painter.setViewport(50,50,width()-100,height()-100);    //设置视口为中心处

painter.setWindow(-10,4,20,-8);
                //定义窗口 左上角为(-10,4) 右下角为(10,-4)

painter.fillRect(-10,4,20,-8,Qt::black);

painter.setPen(QPen(QBrush(Qt::green),1/(width()-100)/20));
      //由于当前窗口和视口的比例为 width()-100 : 20
      //所以1px的横纵Line线宽 = 1/(width()-100)/20

painter.drawLine(-10,0,10,0);

painter.setPen(QPen(QBrush(Qt::green),1/(height()-100)/8));

painter.drawLine(0,-4,0,4);

for(float x=-10;x<10;x+=0.01)
{
        float y= qSin(x);
        painter.drawPoint(QPointF(x,y));
        qDebug()<<x <<","<<y;
}

效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

1022
来自专栏十月梦想

表格属性(特有)

       设置边框前提border-collapse取值为sparete(不合并),

883
来自专栏小白客

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3216
来自专栏九彩拼盘的叨叨叨

图片不变形,宽高不超出父元素的情况下旋转图片

如题,具体的效果见这里 。做这样的效果的难点在于,计算没旋转前图片的宽,高和旋转后的宽高。

723
来自专栏AndroidTv

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

823
来自专栏静晴轩

CSS征途之Background点滴

CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

3264
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

894
来自专栏7号代码

Android应用界面开发——布局

线性布局可以控制各组件横向排列(通过设置属性android:orientation属性控制),也可控制各组件纵向排列。

812
来自专栏林德熙的博客

win10 uwp 绘图 Line 控件使用

本文主要讲一个在绘图中,我们会有一个基础的控件,Line。控件的基本使用和他能做出的我们很多时候需要的界面。

692
来自专栏hbbliyong

HTML之marquee(文字滚动)详解

语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red>Hell...

52814

扫码关注云+社区