Results 1 to 3 of 3

Thread: How to make background rectangle transparent containing many elements?

  1. #1
    Join Date
    Nov 2010
    Posts
    5
    Qt products
    Qt4
    Platforms
    Unix/X11

    Question How to make background rectangle transparent containing many elements?

    The code is as below.
    What i want to do is to make the outer rectangle transparent containing the image. If I put the opacity of the outer rectangle to 0.0 then image being the child also becomes transparent. Is there a way to make outer rectangle transparent irrespective of inner image.

    Qt Code:
    1. Rectangle
    2. {
    3. id:outerRect
    4. width: 308
    5. height: 271
    6. color:"transparent"
    7. property variant deleteTipData:deletePopUpData
    8.  
    9. Image {
    10. id: backImage
    11. source: "ui_images/background.png"
    12. width:208
    13. height: 171
    14.  
    15. }
    16.  
    17. }
    To copy to clipboard, switch view to plain text mode 

  2. #2
    Join Date
    Oct 2009
    Posts
    47
    Thanks
    10

    Default Re: How to make background rectangle transparent containing many elements?

    You can simply create a rectangle that isn't a parent/child of anything. Just make a rectangle and set its position behind the image.


    example:
    Qt Code:
    1. import Qt 4.7
    2.  
    3. Rectangle {
    4. id: rectangle2
    5. width: 200
    6. height: 200
    7.  
    8. Rectangle {
    9. id: rectangle1
    10. x: 35
    11. y: 58
    12. width: 131
    13. height: 84
    14. color: "#f92626"
    15. opacity: 0.49
    16. anchors.verticalCenterOffset: 0
    17. anchors.verticalCenter: parent.verticalCenter
    18. }
    19.  
    20. Image {
    21. id: image1
    22. x: 74
    23. y: 76
    24. width: 54
    25. height: 49
    26. source: "qrc:/qtquickplugin/images/template_image.png"
    27. }
    28. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by technoViking; 14th December 2010 at 12:34.

  3. #3

    Default Re: How to make background rectangle transparent containing many elements?

    Had the same problem. There's a couple of ways to do this:

    1) Use the method technoViking uses
    2) Make the Image the parent and the Rectangle the child and just make the child bigger than the parent. Problem with this is that you need to take care when positioning your object. Just plain adding such obejcts into (e.g.) a column without appropriate spacing will lead to overlapping areas.

    In my case I wanted to have an invisible border that would already react to a mouseHover before the user reaches the icon. So I made an Item as parent with a smaller scaled image and a full scaled mouseArea as children
    Last edited by antialias_forum; 22nd December 2010 at 16:20.

Similar Threads

  1. Replies: 1
    Last Post: 29th December 2010, 15:53
  2. Make Grid of Rectangle
    By sagirahmed in forum Newbie
    Replies: 1
    Last Post: 8th October 2010, 07:59
  3. Make Grid of Rectangle
    By sagirahmed in forum Qt Programming
    Replies: 1
    Last Post: 8th October 2010, 07:59
  4. Transparent background on QLabel on transparent QWidget
    By codeslicer in forum Qt Programming
    Replies: 1
    Last Post: 13th February 2008, 03:10
  5. Why the background is not transparent?
    By SkripT in forum Qt Programming
    Replies: 4
    Last Post: 9th May 2006, 02:17

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.