【QT】绘图API - 技术栈

绘图API核心类

第一步：重写paintEvent事件函数

第二步：创建QPainter

第三步：设置QPainter绘制的文字类型（非必须）

前面介绍的Qt的各种控件，本质上都是画出来的，都是Qt已经提前画好的，拿过来就能使用，实际开发中，很可能出现现有的控件无法满足需求，需要自己diy一些控件/效果，Qt提供的绘图API就是为了解决上述问题的。

绘图API核心类

类	说明
QPainter	"绘画者" 或者 "画家". 用来绘图的对象, 提供了⼀系列 drawXXX ⽅法, 可以允许我们绘制各种图形.
QPaintDevice	"画板". 描述了 QPainter 把图形画到哪个对象上. 像咱们之前⽤过的 QWidget 也是⼀种 QPaintDevice (QWidget 是 QPaintDevice 的⼦类)
QPen	"画笔". 描述了 QPainter 画出来的线是什么样的.
QBrush	"画刷". 描述了 QPainter 填充⼀个区域是什么样的.

画图相关的操作，一般不会放到QWidget的构造函数中调用执行，而是提供了一个paintEvent事件处理函数，在这里进行调用。

第一步：重写paintEvent事件函数

在头文件中声明paintEvent函数

cpp 复制代码

void paintEvent(QPaintEvent *event);

在.cpp文件中定义该函数

cpp 复制代码

void Widget::paintEvent(QPaintEvent *event)
{
    //无实际意义，避免警告而已
    (void)event;
}

第二步：创建QPainter

cpp 复制代码

QPainter painter(this);

第三步：设置QPainter绘制的文字类型（非必须）

cpp 复制代码

QFont font("微软雅黑",24);
painter.setFont(font);

第四步：设置画笔属性（线条）

cpp 复制代码

    //设置画笔属性
    QPen pen;
    //设置成蓝色的线条
    pen.setColor(QColor(0,0,255));
    //设置线条的粗细
    pen.setWidth(5);
    //设置线条的风格
    pen.setStyle(Qt::DashLine);
    //让painter对象应用pen对象
    painter.setPen(pen);

第五步：设置画刷的属性（填充）

画刷的style取值可以如下，也就是填充效果

cpp 复制代码

//设置画刷属性
QBrush brush;
brush.setColor(QColor(0,0,255));
brush.setStyle(Qt::Dense5Pattern);
painter.setBrush(brush);

painter.drawEllipse(200,200,400,100);

如果要实现不同的填充效果，可以继续更改brush的style即可

效果如下：

第六步：开始绘制

绘制线段

void drawLine(const QPoint &p1, const QPoint &p2);
参数：
p1：绘制起点坐标
p2：绘制终点坐标

示例：

cpp 复制代码

    //创建QPainter对象
    QPainter painter(this);
    //设置QPainter绘制的字体属性
    QFont font("微软雅黑",24);
    painter.setFont(font);

    //设置画笔属性
    QPen pen;
    //设置成蓝色的线条
    pen.setColor(QColor(0,0,255));
    //设置线条的粗细
    pen.setWidth(5);
    //设置线条的风格
    pen.setStyle(Qt::SolidLine);
    //让painter对象应用pen对象
    painter.setPen(pen);

    //开始绘制
    painter.drawLine(100,100,200,100);

效果：

绘制矩形

void QPainter::drawRect(int x , int y , int width , int height ) ；
参数：
x：窗⼝横坐标；
y：窗⼝纵坐标；
width：所绘制矩形的宽度；
height：所绘制矩形的⾼度；

示例：

cpp 复制代码

    painter.drawRect(100,100,200,200);

效果：

绘制圆形

void QPainter::drawEllipse(const QPoint & center , int rx , int ry )
参数：
center：中心点坐标
rx：横坐标
ry：纵坐标

示例：

前两个参数指定圆心，后面两个参数指定外接矩形的宽度和高度

cpp 复制代码

    painter.drawEllipse(200,200,100,100);

效果

如果我们宽度或者高度不一样的话，他会产生一个椭圆的效果。

绘制文本

QPainter类中不仅提供了绘制图形的功能，还可以使⽤ QPainter::drawText() 函数来绘制⽂字，也可以使⽤QPainter::setFont() 设置字体等信息。
这里的前两个参数，0横坐标表示的是文字最左侧的位置，100纵坐标表示的是文字的基线位置，所谓基线就是四线个中的第三条，如下：

示例：

cpp 复制代码

painter.drawText(0,100,"hello");

效果如下：

绘制图片

Qt 提供了四个类来处理图像数据：QImage、QPixmap、QBitmap 和 QPicture，它们都是常⽤的绘图设备。

QImage主要⽤来进行 I/O 处理，它对 I/O 处理操作进⾏了优化，⽽且可以⽤来直接访问和操作像素；
QPixmap 主要⽤来在屏幕上显⽰图像，它对在屏幕上显⽰图像进⾏了优化；
QBitmap是 QPixmap 的子类，⽤来处理颜⾊深度为1的图像，即只能显示黑白两种颜⾊；
QPicture ⽤来记录并重演 QPainter 命令

基础绘制

前两个参数为从哪个坐标开始绘制图案

cpp 复制代码

    QPixmap pixmap(":/background.jpg");
    painter.drawPixmap(100,100,pixmap);

缩放绘制

前两个参数还是与基础绘制一样，400和300 分别是缩放后图片的宽度和高度

cpp 复制代码

    QPixmap pixmap(":/background.jpg");
    painter.drawPixmap(100,100,400,300,pixmap);

图片旋转

图片旋转，本质上是把QPainter对象进行了旋转，绘制出来的内容也就产生了旋转。

旋转180度

painter.rotate(180);

这个旋转是绕着（0，0）坐标系原点进行的旋转，因此如果我们直接旋转的话，图像可能超出窗口，无法看到效果，所以我们还要进行平移。

图片平移

这里我们平移是把坐标系原点（painter的起点）平移一下，这里是负的是因为我们之前将整个坐标系旋转了180度所以这里要平移到窗口内，需要取负值

painter.translate(-800,-600);