PDA

View Full Version : How to make background rectangle transparent containing many elements?



kunal269
10th December 2010, 10:07
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.




Rectangle
{
id:outerRect
width: 308
height: 271
color:"transparent"
property variant deleteTipData:deletePopUpData

Image {
id: backImage
source: "ui_images/background.png"
width:208
height: 171

}

}

technoViking
14th December 2010, 07:03
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:

import Qt 4.7

Rectangle {
id: rectangle2
width: 200
height: 200

Rectangle {
id: rectangle1
x: 35
y: 58
width: 131
height: 84
color: "#f92626"
opacity: 0.49
anchors.verticalCenterOffset: 0
anchors.verticalCenter: parent.verticalCenter
}

Image {
id: image1
x: 74
y: 76
width: 54
height: 49
source: "qrc:/qtquickplugin/images/template_image.png"
}
}

antialias_forum
22nd December 2010, 15:58
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