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_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    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应用QPen
    painter.setPen(pen);

    // 画刷
    // 画的图形内部填充时有不同形状
    QBrush brush;
    brush.setColor(QColor(0, 255, 0));
    //brush.setStyle(Qt::Dense1Pattern);
    brush.setStyle(Qt::CrossPattern);
    painter.setBrush(brush);

    // 画两条线段
    // 起点x1, y1, 终点x2, y2
    painter.drawLine(20, 20, 200, 20);
    painter.drawLine(QPoint(20, 100), QPoint(200, 100));

    // 画矩形
    // 参数为起点位置坐标, 宽度, 高度
    // 参数是const QRect& r
    painter.drawRect(100, 100, 300, 200);

    // 画圆形
    // 参数为圆心, 宽度, 高度
    painter.drawEllipse(200, 200, 100, 100);

    // 通过font设置文字
    QFont font("微软雅黑", 18);
    painter.setFont(font);

    // 文字
    // 参数为坐标和文字内容, 横坐标是文字最左侧位置, 纵坐标是文字基线位置baseline
    painter.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_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    void paintEvent(QPaintEvent* event);

private:
    Ui::Widget *ui;
};

// widget.cpp

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QPixmap pixmap(":/clouds.jpg");
    painter.drawPixmap(0, 0, pixmap);

    // 图片缩放
    // 参数为坐标, 缩放成多少像素*像素, pixmap
    painter.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);