Drawing custom button using QPolygon

Mecanik

For a long time I have been keen to switch to QT from plain old WinApi and build cross-platform apps. Currently I`m still stuck with the "basics" of trying to create my own design.

In the current layout I am working on everything is being drawn (title, system menu) from scratch. On the system menu part so far so good as I am able to draw a nice minimize/close button with hover states.

However when I am trying to create a question mark button (?) or similar which will serve as the "About" button, no success.

My current code will draw something similar to an envelope (lol):

QPolygon border;

border << QPoint(0, 0)
	<< QPoint(width() - 5, 0)
	<< QPoint(width() - 1, 4)
	<< QPoint(width() - 1, height() - 1)
	<< QPoint(0, height() - 1);

QPolygon symbol1, symbol2;

symbol1 << QPoint(4, 4)
	<< QPoint(width() - 4, 4)
	<< QPoint(width() - 4, 8)
	<< QPoint(4, 8);

symbol2 << QPoint(4, 8)
	<< QPoint(width() - 4, 8)
	<< QPoint(width() - 4, height() - 4)
	<< QPoint(4, height() - 4);

QColor gradientStart(0, 0, 0, 0);
QColor gradientEnd(0, 0, 0, 220);

QLinearGradient linearGrad(QPointF(0, 0), QPointF(0, height()));
linearGrad.setColorAt(0, gradientStart);
linearGrad.setColorAt(1, gradientEnd);

QLinearGradient invertlinearGrad(QPointF(0, 0), QPointF(0, height()));
invertlinearGrad.setColorAt(0, gradientEnd);
invertlinearGrad.setColorAt(1, gradientStart);

QPainter painter;
painter.begin(m_Normal);

painter.setPen(QPen(QColor(100, 100, 100)));
painter.setBrush(QBrush(linearGrad));

painter.setPen(QPen(Qt::white));
painter.setBrush(QBrush(QColor(100, 100, 100)));

painter.drawPolygon(symbol1);

painter.setPen(QPen(QColor(100, 100, 100)));
painter.setBrush(Qt::NoBrush);

painter.drawPolygon(symbol2);

painter.end();

painter.begin(m_Hovered);

painter.setPen(QPen(QColor(100,100,100)));
painter.setBrush(QBrush(linearGrad));

painter.setPen(QPen(Qt::red));
painter.setBrush(QBrush(Qt::red));

painter.drawPolygon(symbol1);

painter.setPen(QPen(Qt::red));
painter.setBrush(Qt::NoBrush);

painter.drawPolygon(symbol2);

painter.end();

painter.begin(m_Clicked);

painter.setPen(QPen(QColor(100, 100, 100)));
painter.setBrush(QBrush(invertlinearGrad));

painter.setPen(QPen(Qt::red));
painter.setBrush(QBrush(Qt::red));

painter.drawPolygon(symbol1);

painter.setPen(QPen(Qt::red));
painter.setBrush(Qt::NoBrush);

painter.drawPolygon(symbol2);

painter.end();

If someone could provide a bit of feedback/suggestions/help it would be very much appreciated.

Pl45m4

@Mecanik

What exactly is your question? If you get the wrong result, think about the points you chose.

Mecanik

@Pl45m4 said in Drawing custom button using QPolygon:

@Mecanik

What exactly is your question? If you get the wrong result, think about the points you chose.

My question is what points to draw to achieve a question mark? Or something similar that represents an "about" button.

mrjj

@Mecanik
Hi
Why do you want it as a QPolygon ?

Would be much easier just to use a SVG of a ?

Mecanik

@mrjj said in Drawing custom button using QPolygon:

@Mecanik
Hi
Why do you want it as a QPolygon ?

Would be much easier just to use a SVG of a ?

Well I already have the other icons (minimize, close) drawn like this, and frankly I already have a ton of SVG's for other items in the app. I would be happy if I could simply draw it... if possible.

If not, I guess I will change it. Been googling around a lot but cannot find anything even close to what I need.

mrjj

@Mecanik

Ok. well im not sure you can find a sample of points that makes up a `question mark.
However, you could make a small tool that would show a ? image and the plot with mouse, storing the points and then reuse these.

Mecanik

@mrjj said in Drawing custom button using QPolygon:

small tool that would show a ? i

To be honest, I have no idea how to make such a tool. If this is too complicated, I better let go of this idea and maybe create a simple box for maximize instead of about. lol.

mrjj

@Mecanik

Hi
Well reuse this
https://wiki.qt.io/Clickable_QLabel

its a label that can be clicked.

On mousePressEvent the event has the pos of where its clicked.
so you could just qDebug() the x,y
then use QLables setpixmap to load a an image of a question mark
and then click around its outline

Then after you can get the x,y from the debug console and make them into code.
Should not take long to make.

artwaw

@Mecanik Apart from what others said - and I agree with them - should you decide to keep your approach please take a look at QRawFont, you can obtain painter path for selected glyph, no need to reinvent the wheel for already defined symbols.

https://doc.qt.io/qt-5/qrawfont.html

mrjj

@artwaw
That is actually a much faster idea and more straight :)

artwaw

@mrjj Not necessarily best one though. It depends on the fonts installed in the system removing that convenient layer of abstraction Qt provides. It is probably not portable between the platforms as by the rule of thumb you have to assume that the font you load is present - so to make it portable you have to ship the font with the program (can be resource) but that introduces potential licensing problems...
I would not go that way myself unless I know for certain that it is safe.

Mecanik

Well, it's been quite a while. Whilst you guys gave me the ideas here, especially @artwaw with the QRawFont; someone else helped me achieve this goal.

Even more, there is a nice little tool to help you generate the code points and draw whatever!

https://stackoverflow.com/a/73035353/6583298

Problem solved :)