Creating Custom Ellipse Button

[VireX]

I used 0, and I finally saw the picture. However, the clip stuff never works. Also putting everything inside a QHBoxLayout and settingLayout with a widget, makes it dissappear.

Also Hover absolutely does not work.

[marcel]

Regarding hover:
Hover means you just move your mouse over the widget. You switch to hover if the left button is pressed, in mouseMoveEvent, which is not correct.
To detect hover, there are less processor stressing methods, like QWidget::enterEvent and QWidget::leaveEvent.

Regarding adding your custom btn to layouts:
When I said drawing everything relative to (0,0) I meant to the origin of what rect() returns: rect().topLeft().
Adding to layouts did not worked because everything was drawn in the topleft corner of the layout .

Hope it works now.

Regards

[VireX]

Well how do I add automaticlaly to wherever it needs to draw it...? Is there a way?
Any code examples?

[spud]

Wouldn't it be easier to do this with style sheets?
i.e.

int main(int argc, char **argv)
{
	QApplication app(argc, argv);
	QPushButton btn("quit");	
	btn.setStyleSheet
	(
		"QPushButton {"
		"	border-image: url(normal.png) 17% 17% 17% 17%  stretch stretch; "
		"	border-width: 8px;"
		"}"
		"QPushButton:hover {"
		"	border-image: url(hover.png) 17% 17% 17% 17%  stretch stretch; "
		"	border-width: 8px;"
		"}"
		"QPushButton:pressed {"
		"	border-image: url(pressed.png) 17% 17% 17% 17%  stretch stretch; "
		"	border-width: 8px;"
		"}"
	);
	QObject::connect(&btn, SIGNAL(clicked()), &app, SLOT(quit()));
	btn.show();
	app.exec();
}

int main(int argc, char **argv)
{
	QApplication app(argc, argv);
	QPushButton btn("quit");	
	btn.setStyleSheet
	(
		"QPushButton {"
		"	border-image: url(normal.png) 17% 17% 17% 17%  stretch stretch; "
		"	border-width: 8px;"
		"}"
		"QPushButton:hover {"
		"	border-image: url(hover.png) 17% 17% 17% 17%  stretch stretch; "
		"	border-width: 8px;"
		"}"
		"QPushButton:pressed {"
		"	border-image: url(pressed.png) 17% 17% 17% 17%  stretch stretch; "
		"	border-width: 8px;"
		"}"
	);
	QObject::connect(&btn, SIGNAL(clicked()), &app, SLOT(quit()));
	btn.show();
	app.exec();
}

To copy to clipboard, switch view to plain text mode 

You obviously have to adjust the percentage and border values to fit your bitmap and you won't be able to get a true ellipse since some part of the image must be stretched or repeated depending on the text length, but it seems a lot easier.

[VireX]

I realize that, I won't be able to get it perfectly. I won't be able to cut the square black background into a transparent one or turn the Square feature of pushbutton into an ELLIPSE feature.

the Stretch stuff by the way didn't change anything except when the image size is different than the button size.

[marcel]

Hey man, it works just fine if you do it as I've shown you.

It will work anyway if you use "ready-made" png images for the states. I mean you draw an ellipse in a png and leave everything else transparent. Then just fill the widget with these pixmaps.

If you use transp pixmaps the you don't need setting any clipping masks.

Regards

[high_flyer]

If you use transp pixmaps the you don't need setting any clipping masks.

Are you sure about that?
Is this from experience?
Some time back I implemented a styled button, which can take any shape, and as I remember, I had to use masks in addition to the png (which had transparent areas).

[marcel]

Yes, I have already tried it some time ago.
Also, I might have filled the widget with a transparent pixmap first, then applied the actual png... Can't remember exactly, but it can be done.

Regards

[huyhoangfool]

ui->pushButton->setFixedSize(150,100);
 
    ui->pushButton->setStyleSheet("QPushButton {"
                                  "background-color: red;"
                                  "border-style: solid;"
                                  "border-width: 3px;"
                                  "border-radius: 75px 50px;"
                                  "border-color: blue;"
                                  "font: bold 14px;"
                                  "padding: 6px;}"
                                  "QPushButton:pressed {"
                                  "background-color: rgb(224, 0, 0);}");

ui->pushButton->setFixedSize(150,100);

    ui->pushButton->setStyleSheet("QPushButton {"
                                  "background-color: red;"
                                  "border-style: solid;"
                                  "border-width: 3px;"
                                  "border-radius: 75px 50px;"
                                  "border-color: blue;"
                                  "font: bold 14px;"
                                  "padding: 6px;}"
                                  "QPushButton:pressed {"
                                  "background-color: rgb(224, 0, 0);}");

To copy to clipboard, switch view to plain text mode 

That's what i have implemented ... (For someone looking for a way to go)

Please note : setFixedSize(150,100); and "border-radius: 75px 50px;"

Regards.