well I think you can set radius to a rectangle and make it look like a circle, but it has a lot of limitations.
probably qml canvas will help you, but is in labs stage for the moment.

2beers, circled rectangle will help for center circle with photo, but not for arcs at edge.

Denis, yea like I said it has limitation.

One option those arcs can be png:s with transparency. Highlighting can be implemented by replacing a bitmap.

Ok, to do the above picture:
Save the inside picture as pic2.png. Save the outside picture as pic1.png.

Wahlah, i tested this QML out and it appears exactly as your above image.
You can even set up MouseArea’s that respect the circles.

As for splitting the outside circle in to three arc’s: that’s another kettle of fish!

Will going forward QML support irregular shapes.

Thanks for the replies everybody! I had that implemented already, but I didn’t like the methods to achieve that..

The image inside circle I did with a c++ extension to do the clipping:

I know I could just put a PNG image with a transparent circle inside it, but it woudn’t work for me, because I need transparent background..

The 3 arcs are 3 PNG images with transparency, and when I mouse hover then, they became orange..

But I had problems with the retangular MouseArea, because I needed the arcs to be buttons, but I had retangular mouseAreas instead. Anyway, I solved that by putting a smaller rounded mouseArea above the arcs, so as Quick doesn’t support overlapping MouseAreas, it sort of cut off the arc’s retangular mouseArea :P

My point is, it should be easier to work with non-retangular areas in Qt Quick. Will this be supported in the future?

puelocesar wrote:

My point is, it should be easier to work with non-retangular areas in Qt Quick. Will this be supported in the future?

I asked a similar question a few month ago and it seems that non-rectangular shapes have a lot of limitations. my problem was with clipping a “rounded” rectangle: here is what doc is tolding [doc.qt.nokia.com]

“Non-rectangular clipping regions are not supported for performance reasons.”

There’s a special widget in here: http://developer.qt.nokia.com/wiki/EmbeddedWidgetDemos
Source code is at the top.
At the bottom of the page, look at Qt5WayWidget. I think you could modify it to a 4 way widget. It looks to be exactly what you want.

Then you just need to put the class in to QML as a Type :).

Have you checked the Pie menu implementation in Qt solutions: http://doc.trolltech.com/qq/qq09-qt-solutions.html

Hope the next release of QML supports handling such irregular shapes.

blex wrote:

Have you checked the Pie menu implementation

Which you can link to QML with a plugin like this: http://doc.qt.nokia.com/latest/declarative-tutorials-extending-chapter6-plugins.html

It’s for PieChart but just as easily PieMenu.

This is what you’ll need to do until there’s proper support for arcs and so on.

xsacha wrote:

Which you can link to QML with a plugin like this: http://doc.qt.nokia.com/latest/declarative-tutorials-extending-chapter6-plugins.html

Thanks for the link.

Thanks for the tips! That’s what I’m doing, creating c++ extensions to things I can’t do in Qml. But I’m having serious problems in turning these extensions in plugins…