Qt：绘图API

初识绘图

我们前面学习 Qt 主要是学 Qt 的各种控件，本质上都是画出来的

都是一些常用的东西，Qt 已经提前画好了，拿过来就能使用

实际开发中，很可能现有的控件无法满足需求，就需要自己 diy 一些控件/效果

Qt 提供的 绘图 API 就是为了解决上述问题的

实际开发中大部分情况下不需要使用 绘图 API

绘图API核心类：

画图相关的操作，一般不会放到 QWidget 的构造函数中调用执行，而是 Qt 提供了一个 paintEvent

事件处理函数，在这里进行调用

在出现下面的情况时，都能够自动触发到 QPaintEvent 事件：

• 1.控件首次创建的时候

  比如往 QWidget 上画画

  QWidget 创建之前，画的东西当然不生效

  首次创建 QWidget 就能显示出画的东西来

• 2.控件被遮挡, 再解除遮挡

  这个时机进行绘制也是很重要的,否则绘制的内容就会在被遮挡之后就没了

• 3.窗口被最小化，再还原

• 4.控件大小发生改变的时候

• 5.主动在代码中调用 repaint 或者 update触发事件.(都是 QWidget 提供的成员函数)

因此 paintEvent 函数也就能够自动被调用

绘图API的使用

绘制形状(QPaintEvent)

在 widget.h 中需要重写 PaintEvent 函数：

函数定义如下：

上述函数的注意事项：

• (void)event；是为了不报警告，因为下面的程序没有用到参数 event
• 这是定义在栈上的变量，不需要考虑释放的问题，此处指定的 this，不是 父对象，而是指定绘制的设备(往啥东西上画)
• drawLine后面的参数表示起点和终点的横纵坐标

此时效果为一条斜线：

也可以画矩形：

效果为：

也可以画圆形，前两个参数表示圆心的位置坐标，后两个参数表示圆的外接矩形的宽度和高度

正圆形：

椭圆形：

椭圆形的效果为：

绘制文字(画笔QPen)

在上述画形状的地方改为下面的代码，就可以绘制文字了：

注意理解这里的坐标的位置

此处的 0 横坐标，表示的是 文字最左侧的位置

此处的 100 纵坐标，表示的是文字的"基线位置" (整个字从上到下大约第二个三等分点的位置)，也就是下图中红色线的位置：

效果为：

如果觉得字体不符合预期，也可以设置字体和字体大小：

此时效果如下：

通过画笔对象 QPen 设置绘制的形状的颜色信息：

颜色、粗细、样式

还可以设置样式：

下面设置圆形的颜色、粗细、样式：

效果为：

内部填充(画刷QBrush)

画刷QBrush 主要是起到内部填充的效果

除了颜色，还有风格：

在上述画笔的代码中，添加画刷的相关代码：

此时效果为：

上述是采用实心的方式填充的，下面采用其他方式填充：

效果为：

此时绿色填充中间就变为绿色的网格线了

绘制图片(QPixmap)

Qt提供了四个类来处理图像数据：Qlmage、QPixmap、QBitmap和 QPicture

它们都是常用的绘图设备

• 其中Qlmage主要用来进行I/0 处理，它对I/0处理操作进行了优化，而且可以用来直接访问和操作像素
• OPixmap 主要用来在屏幕上显示图像，它对在屏幕上显示图像进行了优化
• QBitmap是 QPixmap 的子类，用来处理颜色深度为1的图像，即只能显示黑白两种颜色
• QPicture 用来记录并重演 OPainter 命令

下面以 QPixmap 为例， 只讲解 QPixmap

先创建一个项目，再创建 qrc 文件，将前面的 cat.png 导入进项目中

同样重写 paintEvent 函数：

效果为：

除了能进行基础的绘制，还能进行图片缩放：

• 100,100：指的是距离窗口左上角的偏移
• 400,300：指的是图片缩放的长宽比例

效果为：

还可以进行图片旋转：

• painter.rotate(180) 是绕着 0,0 坐标系原点进行的旋转，此时旋转的效果看不到小猫图片，因为已经旋转到窗口外面了：

  

  为了让图片能够显示出来，可以把坐标系原点(Painter 的起点) 平移一下

• painter.translate(-800, -600) 表示将原点平移到 -800,-600 的位置

  因为原本的坐标系是向右和向下增长的， 现在旋转180度变为向左和向上增长，想让图片显示出来，就需要将图片向右和向下平移，所以x和y需要减小，也就是 -800,-600，此时效果为：

  

运行程序，效果为：

Qt：绘图API到此学习结束