Qt 5.14.2 学习记录 —— 이십삼 绘图API

文章目录

1、概念
2、API

1、概念

Qt的各个控件本质是画出来的。有时候现有控件无法完成所需功能，那就用绘图API来自定义控件。

QPainter提供一系列的绘图方法
QPaintDevice表示用户画的要放到哪个设备上，QWidget是它的子列
QPen是画笔
QBrush是画刷，填充时的属性

画图相关操作是在paintEvent事件处理函数中调用的，还有一个QPaintEvent事件。

当控件放到QWidget中，QWidget首次创建后就会显示出对应的控件，此时就触发了QPaintEvent事件。

控件被遮挡，再解除遮挡时也会触发这个事件。

窗口最小化再还原会触发。

控件大小改变时会触发。

代码中调用repaint或update会触发。

2、API

创建QWidget项目

// widget.h#include <QWidget>
#include <QPainter>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void paintEvent(QPaintEvent* event);private:Ui::Widget *ui;
};

void Widget::paintEvent(QPaintEvent *event)
{(void) event;   // 只是用来解除编译器警告// 绘图工作QPainter painter(this); // 这里的this表明绘制到哪个设备// 设置QPen来设置线条QPen pen;pen.setColor(QColor(255, 0, 0));// 线条粗细pen.setWidth(5);// 线条风格pen.setStyle(Qt::DashLine);// 给painter应用QPenpainter.setPen(pen);// 画刷// 画的图形内部填充时有不同形状QBrush brush;brush.setColor(QColor(0, 255, 0));//brush.setStyle(Qt::Dense1Pattern);brush.setStyle(Qt::CrossPattern);painter.setBrush(brush);// 画两条线段// 起点x1, y1, 终点x2, y2painter.drawLine(20, 20, 200, 20);painter.drawLine(QPoint(20, 100), QPoint(200, 100));// 画矩形// 参数为起点位置坐标, 宽度, 高度// 参数是const QRect& rpainter.drawRect(100, 100, 300, 200);// 画圆形// 参数为圆心, 宽度, 高度painter.drawEllipse(200, 200, 100, 100);// 通过font设置文字QFont font("微软雅黑", 18);painter.setFont(font);// 文字// 参数为坐标和文字内容, 横坐标是文字最左侧位置, 纵坐标是文字基线位置baselinepainter.drawText(0, 100, "文字");
}

绘制图片。共有四个类，QImage用来进行IO处理，可直接访问和操作像素，保存、传输、编辑图片；QPixmap在屏幕上显示图形；QBitmap是QPixmap子类，处理颜色深度为1的图像，也就是只能显示黑白两种颜色；QPicture记录并重演QPainter命令，比如回看录像。这里写QPixmap。

创建QWidget项目，创建qrc并保存好一个图片。

// widget.h#include <QWidget>
#include <QPainter>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void paintEvent(QPaintEvent* event);private:Ui::Widget *ui;
};// widget.cppvoid Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);QPixmap pixmap(":/clouds.jpg");painter.drawPixmap(0, 0, pixmap);// 图片缩放// 参数为坐标, 缩放成多少像素*像素, pixmappainter.drawPixmap(100, 100, 400, 300, pixmap);// 图片旋转// 实际上是把QPainter对象进行了旋转, 绘制的内容也就旋转了painter.rotate(180);// 绕着0, 0坐标系原点进行的旋转// 旋转180其实是以窗口左上角为原点, 旋转到窗口外// 把坐标系原点(Painter起点)移动, 就能看到了painter.translate(-800, -600);painter.drawPixmap(100, 100, 400, 300, pixmap);
}

关于QPicture

QPicture pic;
QPainter painter;
painter.begin(&pic);
// painter操作
painter.end(&pic);
pic.save("path");// 重现
QPainter painter(this);
QPicture pic;
pic.load("path");
painter.drawPicture(0, 0, pic);