[OpenCV Qt教程] 在Qt图形界面中显示OpenCV图像的OpenGL Widget (第一部分)

本文译自：http://www.robot-home.it/blog/en/software/tutorial-opencv-qt-opengl-widget-per-visualizzare-immagini-da-opencv-in-una-gui-con-qt/

重要术语保持英文不变，如Widget等。原文中rendering意为渲染或绘制。

此教程是关于在Qt图形界面中显示OpenCV图像的问题，我们创建了一个基于QGLWidget的Qt Widget。

这个Widget提供了更好的图像绘制性能，并支持在缩放窗口时固定高宽比。

此教程假定读者掌握关于C++、Qt 5 框架、OpenCV 2库在Qt Creator中开发环境的配置的基础知识。实例代码是在Windows 7下设计的，但也能在不需大幅改动的前提下移植到Linux和MacOS中，只需配置正确的库文件路径即可。

第一部分描述了Widget的创建。

CQtOpenCVViewerGl 类的创建：

在 QtCreator 中：

文件-> 新建文件或工程 -> C++ -> C++ Class -> Choose

类名： CQtOpenCVViewerGl

基类： QGLWidget [注意字母大小写]

译者注：从Qt 5.4版本开始，QGLWidget已更新为QOpenGLWidget。

到这一步你应该在工程中建立了两个新的文件，cqtopencvviewergl.cpp 和 cqtopencvviewergl.h 。

打开 cqtopencvviewergl.h 并添加几个私有成员变量：

private:
bool mSceneChanged; /// Indicates when OpenGL view is to be redrawn
QImage mRenderQtImg; /// Qt image to be rendered
cv::Mat mOrigImage; /// original OpenCV image to be shown
QColor mBgColor; /// Background color
int mOutH; /// Resized Image height
int mOutW; /// Resized Image width
float mImgratio; /// height/width ratio
int mPosX; /// Top left X position to render image in the center of widget
int mPosY; /// Top left Y position to render image in the center of widget

mSceneChanged： 指示图像是否需要绘制

mRenderQtImg： 包含需要绘制的图像 (Qt格式)

mOrigImage： 包含需要绘制的图像 (OpenCV格式)

mBgColor： 不显示图像的区域的背景色

mOutH & mOutW： 图像真实绘制尺寸

mImgratio： 包含有关图像大小比例的信息

mPosX & mPosY： 左上角开始的图像坐标，允许在窗口部件的中心绘制图像

至此我们还需要一些函数，首先我们添加一个信号函数(signal)和一个槽函数(slot)：

signals:
void imageSizeChanged( int outW, int outH ); /// Used to resize the image outside the widget
public slots:
bool showImage( cv::Mat image ); /// Used to set the image to be viewed

void imageSizeChanged( int outW, int outH )： 这是一个用来在“Qt世界中”交流”的函数，它能够发出widget大小发生变化的消息，还有变化后的尺寸大小(outW、outH参数)。如果我们想向Widget传递一个缩放过的图像，而不想迫使Widget在每次渲染时都进行缩放操作的话，这个函数很有用。

bool showImage( cv::Mat image )： 这个函数向窗口传递需要绘制的图像。这是一个槽函数，是信号函数的响应。

最后，添加五个函数用来绘制图像：

protected:
void initializeGL(); /// OpenGL initialization
void paintGL(); /// OpenGL Rendering
void resizeGL(int width, int height); /// Widget Resize Event
void updateScene(); /// Forces a scene update
void renderImage(); /// Render image on openGL frame

void initializeGL()： 初始化openGL

void paintGL()： 使用 openGL 绘制

void resizeGL(int width, int height)： 使用 openGL 调整尺寸

void updateScene()： 强制绘制

void renderImage()： 被paintGL调用，用来高效地绘制图像

现在，是时候在 cqtopencvviewergl.cpp 中进行变量初始化和函数实现了。

构造函数：

CQtOpenCVViewerGl::CQtOpenCVViewerGl(QWidget *parent) :
QGLWidget(parent)
{
mSceneChanged = false;
mBgColor = QColor::fromRgb(150, 150, 150);

mOutH = 0;
mOutW = 0;
mImgratio = 4.0f/3.0f; // Default image ratio

mPosX = 0;
mPosY = 0;
}

其他函数：

void CQtOpenCVViewerGl::initializeGL()
{
makeCurrent();
qglClearColor(mBgColor.darker());
}

设定背景色，这个函数如同下一个一样，从 makeCurrent 函数开始，这个函数允许图形界面使用多于一个的OpenGL部件。

void CQtOpenCVViewerGl::resizeGL(int width, int height)
{
makeCurrent();
glViewport(0, 0, (GLint)width, (GLint)height);

glMatrixMode(GL_PROJECTION);
glLoadIdentity();

glOrtho(0, width, 0, height, 0, 1); // To Draw image in the center of the area

glMatrixMode(GL_MODELVIEW);

// ---> Scaled Image Sizes
mOutH = width/mImgratio;
mOutW = width;

if(mOutH>height)
{
mOutW = height*mImgratio;
mOutH = height;
}

emit imageSizeChanged( mOutW, mOutH );
// < --- Scaled Image Sizes

mPosX = (width-mOutW)/2;
mPosY = (height-mOutH)/2;

mSceneChanged = true;

updateScene();
}

这个函数在每次Widget大小变化时被调用：

3-12行： OpenGL 布局初始化

14-21行： 计算图像大小，维持高宽比

23行： 发出 “imageSizeChanged” 信号

26-27行： 计算图像左上角的坐标，使得图像位于窗口中间

29-31行： 使Widget知道有一张新的图像要显示

void CQtOpenCVViewerGl::updateScene()
{
if( mSceneChanged && this->isVisible() )
updateGL();
}

updateScene 函数被用来在图像更新之后 “强制” 绘制图像。 只在确定需要时才调用 updateGL 绘制图像。

void CQtOpenCVViewerGl::paintGL()
{
makeCurrent();

if( !mSceneChanged )
return;

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

renderImage();

mSceneChanged = false;
}

paintGL 是当OpenGL Widget等待更新时被调用的一个函数。在这里，这个函数清除现有图像并调用renderImage 来高效地绘制图像。

void CQtOpenCVViewerGl::renderImage()
{
makeCurrent();

glClear(GL_COLOR_BUFFER_BIT);

if (!mRenderQtImg.isNull())
{
glLoadIdentity();

QImage image; // the image rendered

glPushMatrix();
{
int imW = mRenderQtImg.width();
int imH = mRenderQtImg.height();

// The image is to be resized to fit the widget?
if( imW != this->size().width() &&
imH != this->size().height() )
{

image = mRenderQtImg.scaled( //this->size(),
QSize(mOutW,mOutH),
Qt::IgnoreAspectRatio,
Qt::SmoothTransformation
);

//qDebug( QString( "Image size: (%1x%2)").arg(imW).arg(imH).toAscii() );
}
else
image = mRenderQtImg;

// --->Centering image in draw area

glRasterPos2i( mPosX, mPosY );
// < --- Centering image in draw area

imW = image.width();
imH = image.height();

glDrawPixels( imW, imH, GL_RGBA, GL_UNSIGNED_BYTE, image.bits());
}
glPopMatrix();

// end
glFlush();
}
}

renderImage 是widget中一个主要的函数，事实上是它绘制了图像。

19-32行： 这几行用来调整图像大小，并保证此时图像是一直可见的。注意图像大小是否正确，过于繁重的操作是不会被处理的。我在这一段插入了imageSizeChanged 信号，使得其他GUI函数仅在原始图像创建时进行调整大小的操作，而不是在每一次绘制图像时都去处理

36行： 指示图像左上角坐标，使得图像居中显示

42行： 利用OpenGL 的 glDrawPixels 函数进行真正的绘制

bool CQtOpenCVViewerGl::showImage( cv::Mat image )
{
image.copyTo(mOrigImage);

mImgratio = (float)image.cols/(float)image.rows;

if( mOrigImage.channels() == 3)
mRenderQtImg = QImage((const unsigned char*)(mOrigImage.data),
mOrigImage.cols, mOrigImage.rows,
mOrigImage.step, QImage::Format_RGB888).rgbSwapped();
else if( mOrigImage.channels() == 1)
mRenderQtImg = QImage((const unsigned char*)(mOrigImage.data),
mOrigImage.cols, mOrigImage.rows,
mOrigImage.step, QImage::Format_Indexed8);
else
return false;

mRenderQtImg = QGLWidget::convertToGLFormat(mRenderQtImg);

mSceneChanged = true;

updateScene();

return true;
}

最后的函数也很重要，这个函数需要告诉widget哪个图像要被绘制，showImage 函数工作在单通道或三通道的8 bit OpenCV (cv::Mat) 格式下，并且把图像转换成QGLWidget要用的格式。

这个函数还计算并存储了图像的高宽比(第5行)。

教程第一部分结束。

示例代码可到Github上下载。

https://github.com/Myzhar/QtOpenCVViewerGl