add button on the top of the qglwidget

Question

I add a toolbutton on the top of my qglwidget. The icon image of the toolbutton is round except the transparent edge.But after coding and showing the widget, the side of the buttong is black.

my result

What work should I do to make the edge transparent? My platform is Qt 5.3.2 MSVC2010. I want to get this example as my final target

MyQGLWidget.cpp:

void WorldView::initializeGL()
{
    loadGLTexture();
    glEnable(GL_TEXTURE_2D);
    glShadeModel(GL_SMOOTH); // 启用阴影平滑
    glClearColor(0.0f, 0.0f, 1.0f, 0.0f); // 蓝色背景
    glClearDepth(1.0f); // 设置深度缓存
    glEnable(GL_DEPTH_TEST); // 启用深度测试
    glDepthFunc(GL_LEQUAL); // 所作深度测试的类型
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);  // 告诉系统对透视进行修正
}

void WorldView::resizeGL(int width, int height)
{
    if (height == 0) { // 防止被零除
        height = 1; // 将高设为1
    }

    glViewport(0, 0, width, height); //重置当前的视口
    glMatrixMode(GL_PROJECTION);// 选择投影矩阵
    glLoadIdentity();// 重置投影矩阵
    //设置视口的大小
    gluPerspective(45.0f, (GLfloat)width/(GLfloat)height, 0.1f, 100.0f); //透视投影

    glMatrixMode(GL_MODELVIEW); //选择模型观察矩阵
    glLoadIdentity(); // 重置模型观察矩阵
}

void WorldView::paintGL()
{
    // is empty
}

MyMainWindow:

void MyMainWindow::createUiElements()
{
    int nXStart, nYStart;
    int nWidth,  nHeight;
    // set main window size
    nXStart = (QApplication::desktop()->width()  - WIN1_WIDTH)/2;
    nYStart = (QApplication::desktop()->height() - WIN1_HEIGHT)/2;
    setGeometry(nXStart,nYStart,1024,768);
    // add opengl widget to ui
    mpWorldView = new WorldView(this);
    mpWorldView->setGeometry(0,0,WIN1_WIDTH,WIN1_HEIGHT);
    // add more options button to ui
    mpBtnMoreOptions = new QToolButton(this);
    nWidth  = 56;
    nHeight = 56;
    nXStart = this->width() - nWidth - 20;
    nYStart = this->height() - nHeight - 20;
    mpBtnMoreOptions->setGeometry(nXStart, nYStart, nWidth, nHeight);
    mpBtnMoreOptions->setIconSize(QSize(56,56));
    mpBtnMoreOptions->setIcon(QIcon("./icons/ic_more.png"));
    mpBtnMoreOptions->setAutoRaise(true);
}

Answer 1

You might be able to be explicit about the elliptical geometry you want using QWidget::setMask (which QToolButton inherits), I haven't tested it alongside setIcon but it works without so it might be worth a shot. You could do it with something like

QRect rect(nXStart, nYStart, nWidth, nHeight);
QRegion region(rect, QRegion::Ellipse);
mpBtnMoreOptions -> setMask(region);

I have not tested this though so no guarantees.

Edit

Here is a more complete example, with some corrections to get the region geometry right

QMainWindow* main = new QMainWindow;
QWidget *central = new QWidget;

QToolButton* tool = new QToolButton(central);
int nWidth = 100;
int nHeight = 100;
int nXStart = 10;
int nYStart = 10;
QRect rect(nXStart, nYStart, nWidth/2, nHeight/2);
tool->setGeometry(rect);
rect.setRect(0, 0, nWidth/2, nHeight/2);    // Region needs to start at (0,0)
QRegion region(rect, QRegion::Ellipse);
tool->setMask(region);
tool->setIconSize(QSize(100, 100));
tool->setIcon(QIcon(":/Test/icon"));
tool->setAutoRaise(true);

main->setCentralWidget(central);
main->resize(600, 400);
main->show();

---

Output