[OpenCV Qt教程] 在Qt图形界面中显示OpenCV图像的OpenGL Widget (第一部分)
重要术语保持英文不变，如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上下载。
