音视频技术应用(5)使用QT渲染RGB数据的一个简单示例

这里演示使用QT渲染一幅 宽高为1280 * 720的 红色RGB图像。

首先需要理解RGB三原色，每个颜色其实都可以用一个byte(0~255)来表示，若R = 0， G = 0， B = 0，用16进制表示则是0x000000, 也就是黑色；若R = 255， G = 255， B = 255，用16进制表示则是0xFFFFFF, 也就是白色。通过给RGB三原色赋不同的值，可以混合成其它颜色。我们这里要显示纯红色的图像的话，R = 255， G = 0， B = 0, 用十六进制表示就是0xFF0000;

下面具体演示一下:

1. 首先新建一个QT项目：

2. 在testrgb.h 中重写 QT 绘制画面的函数： void paintEvent(QPaintEvent *ev) 

#pragma once

#include <QtWidgets/QWidget>
#include "ui_testrgb.h"

class TestRGB : public QWidget
{
    Q_OBJECT

public:
    TestRGB(QWidget *parent = Q_NULLPTR);

    // 重写绘制画面的函数
    void paintEvent(QPaintEvent *ev) override;
private:
    Ui::TestRGBClass ui;
};

3. 在testrgb.cpp中重写绘制画面的函数，并增加下列的code:

#include "testrgb.h"

#include <qpainter.h>
#include <qimage.h>

static int w = 1280;
static int h = 720;

TestRGB::TestRGB(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    // 重新设定窗口的大小为1280 * 720
    resize(w, h);
}


void TestRGB::paintEvent(QPaintEvent* ev)
{
    QImage img(w, h, QImage::Format_RGB888);

    auto data = img.bits();

    // 这里采用的像素格式是RGB888，意味着每个像素点有3个RGB分量组成
    // j 表示行数
    for (int j = 0; j < h; j++)
    {   
        // line_R 表示每一行的第一个R分量的位置
        // 比如
        // 第一行的第一个R分量的下标为: 0 =    1280(每一行的像素数) * 3(单个像素占用的字节数) * 0(行号) 
        // 第二行的第一个R分量的下标为：3840 = 1280(每一行的像素数) * 3(单个像素占用的字节数) * 1(行号) 
        int line_R = w * 3 * j;

        // i = 0 表示的是这一行的第1个R分量，i = 3 表示的是每一行的第2个R分量,i=6 表示的是每一行的第三个R分量，依此类推...
        // 通过 i + 1 可以取得R分量后面紧跟的G分量，i + 2可以取得G分量后面跟的B分量
        for (int i = 0; i < w * 3; i+=3)
        {
            data[line_R + i] = 255;         // R
            data[line_R + i + 1] = 0;       // G
            data[line_R + i + 2] = 0;       // B
        }
    }


    QPainter p;
    p.begin(this);

    p.drawImage(0, 0, img);

    p.end();

}

代码注释已经写得很清楚了，就不再赘述了，其中的  img.bits  用于取得对象内部存储的图像数据，接下来的操作其实相当于是给对象内部的图像数据赋值。

运行：

可以看到很容易就能生成一张宽高为1280 * 720的 红色RGB图像。