Results 1 to 8 of 8

Thread: Rectangle with Round corner in qml

  1. #1
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Rectangle with Round corner in qml

    I want to make the following image in the qml:
    gerd.png

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Rectangle with Round corner in qml

    Rectangle has a radius property.

    Cheers,
    _

  3. The following user says thank you to anda_skoa for this useful post:

    ravandi (6th December 2015)

  4. #3
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: Rectangle with Round corner in qml

    how is this?
    gerd2.png

  5. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Rectangle with Round corner in qml

    What do you mean?

    Cheers,
    _

  6. #5
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: Rectangle with Round corner in qml

    I want to make this shap:

  7. #6
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Rectangle with Round corner in qml

    A rounded rect plus a non rounded rect overlapping the first rect's bottom part.

    Cheers,
    _

  8. The following user says thank you to anda_skoa for this useful post:

    ravandi (6th December 2015)

  9. #7
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: Rectangle with Round corner in qml

    my code:
    Qt Code:
    1. import QtQuick 2.3
    2. import QtQuick.Window 2.1
    3. Window {
    4. visible: true
    5. width: 625
    6. height: 420
    7.  
    8. Rectangle {
    9. id: aval
    10. width: 325
    11. height: 200
    12. color: "#7483f2"
    13. border.width: 1
    14. border.color: "red"
    15. radius:20
    16. anchors.centerIn: parent
    17.  
    18. Rectangle {
    19. id: doo
    20. width: 323
    21. height: 20
    22. color: "#7483f2"
    23. anchors.horizontalCenter: parent.horizontalCenter
    24. anchors.bottom: parent.bottom
    25. anchors.bottomMargin: 2
    26. }
    27. }
    28. }
    To copy to clipboard, switch view to plain text mode 
    border.png

  10. #8
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Rectangle with Round corner in qml

    Ah, ok, your other image didn't have that partial overlap at the bottom, so I assumed you wanted the bottom corners to be classic rectangle corners.

    Cheers,
    _

  11. The following user says thank you to anda_skoa for this useful post:

    ravandi (7th December 2015)

Similar Threads

  1. Replies: 2
    Last Post: 25th December 2014, 15:15
  2. Replies: 0
    Last Post: 14th January 2010, 06:48
  3. How to get a round rectangle (QRegion)
    By quzcFroal in forum Qt Programming
    Replies: 7
    Last Post: 2nd June 2008, 21:14
  4. Round-corner dialogs?
    By WinchellChung in forum Newbie
    Replies: 2
    Last Post: 14th March 2008, 19:47
  5. Replies: 7
    Last Post: 15th November 2007, 17:19

Bookmarks

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.