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);
}

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 28 '18 at 03:32

William Miller

9,839
3
25
46

"tool->setMask(region);“ does work. Thanks a lot. But there are still problems. [image](https://pan.baidu.com/s/1qyf5K7qspJKxxfV80nan2Q) . The difference between mine and yours is the widget under the toolbutton. The widget in my example is qglwidget, yours is mainwindow. – Joe Nov 28 '18 at 09:32
You could try setting the `rect` to `(1, 1, nWidth/2 -1, nHeight/2 - 1)`, if it’s an off-by-one somewhere that is causing the black border then that would fix it, otherwise perhaps try `tool->setStyleSheet(“border: none”)`. Those are the only two things I can think of at the moment – William Miller Nov 28 '18 at 09:44
The image I just post is the result after writing "setStyleSheet(“border: none”)". – Joe Nov 28 '18 at 11:16
It looks like that edge is caused by the `QToolButton` thinking it needs to cover more than it actually does, which is because of the hover/focus behavior of `QButton`s. In order to fix that I think you might have to subclass `QToolButton` and override or disable the hover behavior. Off the top of my head I don't know how exactly to do that but it shouldn't be too difficult. – William Miller Nov 28 '18 at 20:32
1

The problem is solved. The way is transfering Qt 5.3.2 to Qt 5.6.3 and QGLWidget to QOpenGLWidget. Some docs on internet say that there maybe some display problems when components stacked, so I try and it does work. – Joe Nov 29 '18 at 03:58
With the method described in this answer or without using a mask? – William Miller Nov 29 '18 at 04:28
1

No. Another valid way is using qt quick on Qt 5.3.2. I tried some guy's qt quick example and it is ok also. – Joe Nov 29 '18 at 04:39

add button on the top of the qglwidget

1 Answers1

Edit

Output