Results 1 to 2 of 2

Thread: Custom shaped forms and controls

  1. #1
    Join Date
    Oct 2007
    Qt products
    Qt4 Qt/Embedded
    Unix/X11 Windows

    Question Custom shaped forms and controls


    Could some Qt expert please advise me how to create, custom shaped forms and controls (buttons and frames/panels) both in Linux and Windows?


    Albert Goodwill

    PS. By the term "Custom shaped" I mean non-rectangular, non-elliptical, with and/or without transparent regions, ie. arbitrary shaped forms which their shapes defined by a background image. (Like the Windows media player skins , or like WinAmp skins
    See also:
    Shaped Forms:

    Shaped Buttons:

  2. #2
    Join Date
    Jan 2007
    Thanked 10 Times in 9 Posts
    Qt products
    Unix/X11 Windows

    Default Re: Custom shaped forms and controls

    in qt you use setMask for this task normally.
    if your shape is a pixmap than use

    Qt Code:
    1. setMask(pixmap.mask());
    To copy to clipboard, switch view to plain text mode 

    to make the window semitransparent(on windows), look at the wiki in examples.
    you can do it in another way, too.

    if you use the ARGB window (from wiki),you can ask in the drawCtrl function for your button if its yours, you draw an pixmap instead of rendering the button. Here some code to do this.

    For example in the right top you have a button called cl (for close):

    Qt Code:
    1. QPushButton *cl = findChild<QPushButton *>(QString("cl"));
    2. if(QRegion(cl->geometry()).contains(mapFromGlobal(QCursor::pos())))
    3. if(!cl->isDown())
    4. clstate = 1;
    5. else
    6. clstate = 2;
    7. else
    8. clstate = 0;
    To copy to clipboard, switch view to plain text mode 


    Qt Code:
    1. if (!widget)
    2. return QPixmap();
    3. else if(widget->objectName() == "cl")
    4. {
    5. QPainter p(&widgetMask);
    6. p.setRenderHint(QPainter::Antialiasing);
    7. switch(clstate)
    8. {
    9. case 0:
    10. p.drawPixmap(widget->geometry(), QPixmap(":/images/cl.png").copy(0,0,128,128));
    11. break;
    12. case 1:
    13. p.drawPixmap(widget->geometry(), QPixmap(":/images/cl.png").copy(0,128,128,128));
    14. break;
    15. case 2:
    16. p.drawPixmap(widget->geometry(), QPixmap(":/images/cl.png").copy(0,256,128,128));
    17. break;
    18. default:
    19. p.drawPixmap(widget->geometry(), QPixmap(":/images/cl.png").copy(0,0,128,128));
    20. break;
    21. }
    22. p.end();
    24. }
    25. else
    26. widget->render(&widgetMask, widget->geometry().topLeft(), r, QWidget::DrawWindowBackground | QWidget::DrawChildren | QWidget::IgnoreMask);
    To copy to clipboard, switch view to plain text mode 

    with this you can simulate hover and pressed. Like i do here you have to do with every widget, you want to shape. The function of the widget is the same, just how it looks is different. this only works if you use argb widgets!


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.