PDA

View Full Version : Widget showing up without a transparent background in QGraphicsView



gsingh93
31st August 2011, 04:54
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(2 40, 240, 240)));

QPainter paint(this);
paint.drawPixmap(0, 0, pixmap);
}
That's how the image is displayed on my widget. When I used the code,

layout->addWidget(0,0,1,1);
the background is transparent. But when I use,

scene->addWidget(piece);
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
31st August 2011, 08:55
You can either setAutoFillBackground() of the widget to false or make your widget a regular graphics item.

gsingh93
4th September 2011, 03:59
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(2 40, 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);
}
}



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(2 40, 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);
}
}

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

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

wysota
4th September 2011, 16:22
Are you sure the image has an alpha channel?

gsingh93
4th September 2011, 19:39
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
5th September 2011, 09:23
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
5th September 2011, 17:01
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
5th September 2011, 18:57
I don't see anywhere that you set autoFillBackground of the Piece instance to false, could you point it to me please?

gsingh93
5th September 2011, 19:22
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.