December 1, 2010

puelocesar puelocesar
Lab Rat
32 posts

Non-retangular shapes

Page  
1

Hey guys, it’s me again.. I’m having lot’s of trouble because I’m working a lot with irregular shapes, like circles, cemi-arcs, etc. Like on this image:
rounded things

Until now, I’m doing them as c++ extensions, with a custom QPainter draw, etc. Is there a better way to work with these custom shapes? Will Qt Quick handle better non retangular shapes in the future?

22 replies

December 1, 2010

2beers 2beers
Lab Rat
149 posts

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.

December 1, 2010

Denis Kormalev Denis Kormalev
Lab Rat
1654 posts

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

December 1, 2010

2beers 2beers
Lab Rat
149 posts

Denis, yea like I said it has limitation.

December 2, 2010

strekazoid strekazoid
Lab Rat
151 posts

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

December 2, 2010

xsacha xsacha
Lab Rat
517 posts

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

  1. import QtQuick 1.0
  2.  
  3. Rectangle { // This is actually a(n Outside) Circle!
  4.     width: 300; height: 300; radius: 300
  5.     Image {
  6.         width: parent.width; height: parent.height;
  7.         source: "pic1.png"
  8.         smooth: true
  9.         Rectangle { // This is actually a(n Inside) Circle!
  10.             anchors.centerIn: parent
  11.             width: 230; height: 230; radius: 230
  12.             Image {
  13.                 width: parent.width; height: parent.height;
  14.                 source: "pic2.png"
  15.                 smooth: true
  16.             }
  17.         }
  18.     }
  19. }

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!

 Signature 

- Sacha

December 2, 2010

QtK QtK
Lab Rat
1140 posts

Will going forward QML support irregular shapes.

December 2, 2010

puelocesar puelocesar
Lab Rat
32 posts

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:

  1. QRegion regiao(boundingRect().x(), boundingRect().y(), boundingRect().width(), boundingRect().height(), QRegion::Ellipse);
  2. painter->setClipRegion(regiao);
  3.     painter->drawImage(boundingRect(), QImage("../ParesQml/" + imagem()));

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

December 2, 2010

puelocesar puelocesar
Lab Rat
32 posts

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

December 2, 2010

2beers 2beers
Lab Rat
149 posts
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.”

December 4, 2010

xsacha xsacha
Lab Rat
517 posts

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 :).

 Signature 

- Sacha

December 4, 2010

blex blex
Lab Rat
192 posts

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

 Signature 

————————————

Oleksiy Balabay

December 4, 2010

QtK QtK
Lab Rat
1140 posts

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

December 4, 2010

xsacha xsacha
Lab Rat
517 posts
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.

 Signature 

- Sacha

December 4, 2010

blex blex
Lab Rat
192 posts
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.

 Signature 

————————————

Oleksiy Balabay

December 6, 2010

puelocesar puelocesar
Lab Rat
32 posts

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…

Page  
1

  ‹‹ Qml Extension and QPainter clipping      QMLViewer app or wrapper? ››

You must log in to post a reply. Not a member yet? Register here!