本文译自: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 中:
译者注:从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
至此我们还需要一些函数,首先我们添加一个信号函数(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
最后,添加五个函数用来绘制图像:
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
现在,是时候在 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大小变化时被调用:
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中一个主要的函数,事实上是它绘制了图像。
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