Widget showing up without a transparent background in QGraphicsView

[gsingh93]

When I was using QGridLayout to display my widgets, only the widget was shown and the part of the image that was transparent was not shown. Now I switched to using QGraphicsScene and QGraphicsView, and now my images have a gray background wherever they used to be transparent.

void Piece::paintEvent(QPaintEvent *)
{
string image = ":/images/" + color + piece + ".png";
pixmap.load(image.c_str());
//pixmap.setMask(pixmap.createMaskFromColor(QColor(240, 240, 240)));
 
QPainter paint(this);
paint.drawPixmap(0, 0, pixmap);
}

void Piece::paintEvent(QPaintEvent *)
{
string image = ":/images/" + color + piece + ".png";
pixmap.load(image.c_str());
//pixmap.setMask(pixmap.createMaskFromColor(QColor(240, 240, 240)));

QPainter paint(this);
paint.drawPixmap(0, 0, pixmap);
}

To copy to clipboard, switch view to plain text mode 

That's how the image is displayed on my widget. When I used the code,

layout->addWidget(0,0,1,1);

layout->addWidget(0,0,1,1);

To copy to clipboard, switch view to plain text mode 

the background is transparent. But when I use,

scene->addWidget(piece);

scene->addWidget(piece);

To copy to clipboard, switch view to plain text mode 

The widget has a gray background. How can I make it transparent? The full code can be found here if necessary (probably won't be necessary): https://github.com/gsingh93/Chess

[wysota]

You can either setAutoFillBackground() of the widget to false or make your widget a regular graphics item.

[gsingh93]

Both of those solutions did not work. Here is my first try with QWidget:

#include "headers/piece.h"
#include <QPainter>
#include <QMouseEvent>
#include <QBitmap>
#include <QCursor>
using namespace std;
 
Piece::Piece(string color, string piece, QWidget *parent) :
    QWidget(parent)
{
    this->piece = piece;
    this->color = color;
    this->setMaximumHeight(36);
    this->setMaximumWidth(36);
    x = 0;
    y = 0;
    setMouseTracking(false);
}
 
void Piece::paintEvent(QPaintEvent *)
{
    string image = ":/images/" + color + piece + ".png";
    pixmap.load(image.c_str());
    //pixmap.setMask(pixmap.createMaskFromColor(QColor(240, 240, 240)));
 
    QPainter paint(this);
    paint.drawPixmap(0, 0, pixmap);
}
 
void Piece::setPosition(int file, int rank)
{
    pixmap.load(":/images/whitepawn.png");
    QImage image = pixmap.toImage();
    x = (file-1)*50 + 18;// - image.width()/2;
    y = (rank-1)*50 + 18;// - image.height()/2;
    move(x, y);
}
 
void Piece::mouseMoveEvent(QMouseEvent *event)
{
    if(event->buttons() == Qt::LeftButton)
    {
	x = event->globalX()-18;
	y = event->globalY()-18;
	move(x,y);
    }
}

#include "headers/piece.h"
#include <QPainter>
#include <QMouseEvent>
#include <QBitmap>
#include <QCursor>
using namespace std;

Piece::Piece(string color, string piece, QWidget *parent) :
    QWidget(parent)
{
    this->piece = piece;
    this->color = color;
    this->setMaximumHeight(36);
    this->setMaximumWidth(36);
    x = 0;
    y = 0;
    setMouseTracking(false);
}

void Piece::paintEvent(QPaintEvent *)
{
    string image = ":/images/" + color + piece + ".png";
    pixmap.load(image.c_str());
    //pixmap.setMask(pixmap.createMaskFromColor(QColor(240, 240, 240)));

    QPainter paint(this);
    paint.drawPixmap(0, 0, pixmap);
}

void Piece::setPosition(int file, int rank)
{
    pixmap.load(":/images/whitepawn.png");
    QImage image = pixmap.toImage();
    x = (file-1)*50 + 18;// - image.width()/2;
    y = (rank-1)*50 + 18;// - image.height()/2;
    move(x, y);
}

void Piece::mouseMoveEvent(QMouseEvent *event)
{
    if(event->buttons() == Qt::LeftButton)
    {
	x = event->globalX()-18;
	y = event->globalY()-18;
	move(x,y);
    }
}

To copy to clipboard, switch view to plain text mode 

Here's how it looks with QGraphicsItem:

#include "piece2.h"
#include <QPainter>
#include <QMouseEvent>
#include <QBitmap>
#include <QCursor>
#include <QGraphicsSceneMouseEvent>
using namespace std;
 
Piece2::Piece2(string color, string piece, QObject *parent) :
    QGraphicsItem()
{
    this->piece = piece;
    this->color = color;
    //this->setMaximumHeight(36);
    //this->setMaximumWidth(36);
    x = 0;
    y = 0;
    //setMouseTracking(false);
}
 
void Piece2::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    string image = ":/images/" + color + piece + ".png";
    pixmap.load(image.c_str());
    //pixmap.setMask(pixmap.createMaskFromColor(QColor(240, 240, 240)));
 
    //QPainter paint(this);
    painter->drawPixmap(0, 0, pixmap);
}
 
void Piece2::setPosition(int file, int rank)
{
    pixmap.load(":/images/whitepawn.png");
    QImage image = pixmap.toImage();
    x = (file-1)*50 + 18;// - image.width()/2;
    y = (rank-1)*50 + 18;// - image.height()/2;
    setPos(x, y);
}
 
void Piece2::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    if(event->buttons() == Qt::LeftButton)
    {
//	x = event->globalX()-18;
//	y = event->globalY()-18;
	setPos(x,y);
    }
}

#include "piece2.h"
#include <QPainter>
#include <QMouseEvent>
#include <QBitmap>
#include <QCursor>
#include <QGraphicsSceneMouseEvent>
using namespace std;

Piece2::Piece2(string color, string piece, QObject *parent) :
    QGraphicsItem()
{
    this->piece = piece;
    this->color = color;
    //this->setMaximumHeight(36);
    //this->setMaximumWidth(36);
    x = 0;
    y = 0;
    //setMouseTracking(false);
}

void Piece2::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    string image = ":/images/" + color + piece + ".png";
    pixmap.load(image.c_str());
    //pixmap.setMask(pixmap.createMaskFromColor(QColor(240, 240, 240)));

    //QPainter paint(this);
    painter->drawPixmap(0, 0, pixmap);
}

void Piece2::setPosition(int file, int rank)
{
    pixmap.load(":/images/whitepawn.png");
    QImage image = pixmap.toImage();
    x = (file-1)*50 + 18;// - image.width()/2;
    y = (rank-1)*50 + 18;// - image.height()/2;
    setPos(x, y);
}

void Piece2::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    if(event->buttons() == Qt::LeftButton)
    {
//	x = event->globalX()-18;
//	y = event->globalY()-18;
	setPos(x,y);
    }
}

To copy to clipboard, switch view to plain text mode 

And here's the main function:

#include <QtGui>
#include <QGraphicsScene>
#include <QGraphicsView>
#include "headers/board.h"
#include "headers/pawn.h"
#include "headers/knight.h"
#include "headers/bishop.h"
#include "headers/rook.h"
#include "headers/king.h"
#include "headers/queen.h"
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QGraphicsScene *scene = new QGraphicsScene();
    QGraphicsView *view = new QGraphicsView();
    Board board;
 
    scene->addWidget(&board);
    scene->addWidget(board.pawn2);
    board.pawn2->setPosition(1,1);
 
    //view->viewport()->setPalette(QColor(Qt::transparent));
    //view->viewport()->setAutoFillBackground(false);
    view->setScene(scene);
    //view->setBackgroundRole(QPalette::NoRole);
    view->show();
    return app.exec();
}

#include <QtGui>
#include <QGraphicsScene>
#include <QGraphicsView>
#include "headers/board.h"
#include "headers/pawn.h"
#include "headers/knight.h"
#include "headers/bishop.h"
#include "headers/rook.h"
#include "headers/king.h"
#include "headers/queen.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QGraphicsScene *scene = new QGraphicsScene();
    QGraphicsView *view = new QGraphicsView();
    Board board;

    scene->addWidget(&board);
    scene->addWidget(board.pawn2);
    board.pawn2->setPosition(1,1);

    //view->viewport()->setPalette(QColor(Qt::transparent));
    //view->viewport()->setAutoFillBackground(false);
    view->setScene(scene);
    //view->setBackgroundRole(QPalette::NoRole);
    view->show();
    return app.exec();
}

To copy to clipboard, switch view to plain text mode 

With everything I try the image still has a white background instead of transparent.

[wysota]

Are you sure the image has an alpha channel?

[gsingh93]

Well it's a png image so I believe it does, I made it transparent myself in paint.net. And also it was working fine when I placed the image in a QGridLayout, but the background only showed up when using QGraphicsScene.

---

Added after 12 minutes:

The solution was board.pawn2->setStyleSheet("background-color: transparent;");

[wysota]

Well it's a png image so I believe it does, I made it transparent myself in paint.net. And also it was working fine when I placed the image in a QGridLayout, but the background only showed up when using QGraphicsScene.

I'm more interested in the graphics item approach and not the widget approach. For the widget I told you to set auto fill background to false which you kindly ignored.

[gsingh93]

For the widget I told you to set auto fill background to false which you kindly ignored.

I didn't ignore that... Look in the posted code and you'll see it commented out, meaning I tried it and it didn't work.

[wysota]

I don't see anywhere that you set autoFillBackground of the Piece instance to false, could you point it to me please?

[gsingh93]

Sorry, I misinterpreted. I thought you meant set it on the view, not the piece, like: view->viewport()->setAutoFillBackground(false);
But anyway, I just tried it out on an object that inherits piece using: king->setAutoFillBackground(false); // king is of type King, King inherits from Piece
and that did not fix the background problem. However when I did: king->setStyleSheet("background-color: transparent;");
then the background went away.