Arc (Curved) Button

Eli_a_n

Hi All,

i was wondering if you could help me build a curved button, something like in qml :

i tried using ArcPath but i don't know how to merge it with the button

thank you,
best regards

Eli_a_n

So nobody knows how to merge 2 items to create that effect ?

mrjj

Hi
To make it a button that only reacts to click with that arc, you have to use a mask as else
its still retangular and also reacts when you click outside.

You can see here how its done.
https://doc.qt.io/qt-5/qtwidgets-widgets-shapedclock-example.html

Basically its a QRegion + setMask
QRegion maskedRegion(width() / 2 - side / 2, height() / 2 - side / 2, side,
side, QRegion::Ellipse);
setMask(maskedRegion);

aæso this
https://stackoverflow.com/questions/12734319/change-rectangular-qt-button-to-round

Eli_a_n

Hi mrjj,

thanks you so much for your help.

regards

mrjj

@Eli_a_n

Hi
np. I think you can make a Qregion from a path.
(i assume it goes for arc path too)

For fun i tried using the image (here on forum) as mask.

alt text

        QPixmap pixmapLogin(":/arc.png");
        QSize imagesize = pixmapLogin.size();
        ui->arcbutton->setFixedSize(imagesize);
        ui->arcbutton->setMask(pixmapLogin.mask());

and it does correctly only click inside the arc.

Note this show only the shape and not the actual image as i just use the image for the button shape. not its icon.