DropShadow for translucent items - qt

Question

I have a problem to create a shadow in an item. The item is not completely opaque and the drawn shadow appears behind the item reducing the transparency effect.
I need something as the picture to the right, but what I got with my attempts is shown to the left. I need you to look through the object, because the background is not solid.
I tried to use maskEf but the object becomes completely opaque. The closest solution I've managed to define is to use another element of the same shape but fully transparent and with solid edge. However I don't like the solid edge, any suggestions?
First attempt. This makes opacity equal to 1 in rec1:
Rectangle {
id: rec1; color: "white"; opacity: 0.5
anchors.fill: parent; radius: CalcSize.getW(8)
layer.enabled: true
layer.effect: DropShadow {
id: shadowEf
anchors.fill: rec1
source: rec1
horizontalOffset: 3
verticalOffset: 3
radius: 15
samples: 16
color: "red"
transparentBorder: true
}
}
Second attempt. This maintains opacity of rec1 but show the border of sourceMaskEf
DropShadow {
id: shadowEf
anchors.fill: sourceMaskEf
source: sourceMaskEf
horizontalOffset: 3
verticalOffset: 3
radius: 15
samples: 16
color: "red"
transparentBorder: true
}
Rectangle {
id: sourceMaskEf; color: "transparent"
anchors.fill: rec1; radius: rec1.radius
border { width: offset; color: "white"; }
}
OpacityMask {
id: maskEf
opacity: 1
anchors.fill: rec1
source: ShaderEffectSource {
sourceItem: shadowEf
hideSource: false
}
maskSource: ShaderEffectSource {
sourceItem: sourceMaskEf
hideSource: false // if set true the shadow is hide to
}
cached: true
}
Rectangle {
id: rec1; color: "white"; opacity: 0.5
anchors.fill: parent; radius: CalcSize.getW(8)
}
Edit
Well, after the suggestion of BaCaRoZzo, this is my solution. It is much closer to what I'm looking for:
Component {
id: fondoItemPromo
Item {
id: item1; opacity: 0.5
layer.enabled: true; anchors.fill: parent
anchors.margins: CalcSize.getW(5) //Just for test
Rectangle {
id: rec1; color: "white"
anchors.fill: parent; radius: CalcSize.getW(8)
Item {
id: item2; opacity: 0.5; layer.enabled: true
anchors.fill: parent; clip: true
Rectangle {
id: rec2; color: "white"
anchors.fill: parent; radius: CalcSize.getW(8)
layer.enabled: true
}
DropShadow {
anchors.fill: rec2
source: rec2
transparentBorder: true
horizontalOffset: 3
verticalOffset: 3
radius: 15
samples: 16
color: "black"; clip: true
}
}
}
}
}
However, the shadow does not extend beyond the limits of the element, as can be seen in the corners:
Any suggestions?

Answer 1

Assuming also the shadow should be semi-transparent - the overall effect would be pretty ugly otherwise - you can solve the issue with the following approach:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.3
ApplicationWindow {
width: 200
height: 300
visible: true
color: "steelblue"
Item {
id: layered
opacity: 0.2
layer.enabled: true
anchors.fill: parent
Rectangle {
id: rec1
width: 100
height: 100
anchors.centerIn: parent
radius: 8
}
DropShadow {
id: drop
anchors.fill: rec1
source: rec1
horizontalOffset: 5
verticalOffset: 5
radius: 15
samples: 16
color: "red"
transparentBorder: true
}
}
}
Here is the resulting Rectangle barely visible w.r.t. the background color and with the correct shadow applied:
Edit
The effect can be combined at various level as done in this example.
Given your edit, I think you have overcomplicated a bit the stuff here. The example I've given above served as a way to show that opacity should work as expected. Given the error you have shown I decided to provide a general solution which you should (hopefully) apply out of the box.
The white Rectangle acts as a container for the actual content. Hence, it should be defined in a different QML file. This way we can provide a default property, i.e. define where children Items should be positioned when added to the component. By adding aliases we are also able to fine tune the component, changing colors, shadow orientation and other graphical aspects. A possible definition of your component is the following:
// ShadowedComponent.qml
import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
opacity: 0.5
layer.enabled: true
clip: true
property alias color: rec.color
property alias dropColor: drop.color
property alias voff: drop.verticalOffset
property alias hoff: drop.horizontalOffset
property alias radius: rec.radius
property alias dropRadius: drop.radius
property alias samples: drop.samples
default property alias childrenz: rec.children //(1)
property int margins: 20 //(2)
Rectangle {
id: rec
width: 100
height: 100
anchors.fill: parent
anchors.margins: margins
radius: 8
clip: true
}
DropShadow {
id: drop
anchors.fill: rec
source: rec
horizontalOffset: 5
verticalOffset: 5
radius: 15
samples: 16
color: "darkgray"
transparentBorder: true
}
}
The declaration in (1) is crucial as hinted in the previous text: with that we specify that any child of ShadowedComponent is automagically child of the inner Rectangle positioning it inside the component (with the desired alignement - see below). Also crucial is the property margins in (2): it gives the necessary gap for the shadow to correctly appear. A value equal to zero result in the error you get as the shadow cannot exceed boundaries of an item.
The component can be used like this:
ShadowedComponent {
color: "red"
dropColor: "black"
voff: 3
hoff: 3
radius: 8
dropRadius: 8
samples: 16
// inner content...
}
or, since all the properties have a default value, like this:
ShadowedComponent {
// inner content...
}
Finally a possible usage example can be the following:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
ApplicationWindow {
width: 300
height: 600
visible: true
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "cyan" }
GradientStop { position: 0.5; color: "#0099FF" }
GradientStop { position: 1.0; color: "#6699FF" }
}
ColumnLayout {
anchors.fill: parent
anchors.margins: 10
ShadowedComponent {
Layout.fillHeight: true
Layout.fillWidth: true
voff: -5
hoff: -10
Image {
source: "http://avatarmaker.net/free-avatars/avatars/animals_216/cats_237/kitty_close_up_avatar_100x100_36619.jpg"
anchors.fill: parent
anchors.margins: 3
}
}
ShadowedComponent {
Layout.fillHeight: true
Layout.fillWidth: true
dropColor: "red"
opacity: 0.7
Text {
anchors.centerIn: parent
text: qsTr("QML ROCKS!!!")
}
}
ShadowedComponent {
Layout.fillHeight: true
Layout.fillWidth: true
voff: -5
hoff: -10
dropColor: "red"
BusyIndicator {
anchors.centerIn: parent
running: true
}
}
ShadowedComponent {
Layout.fillHeight: true
Layout.fillWidth: true
opacity: 0.6
Test {
anchors.fill: parent
opacity: 1
margins: 10
Text {
anchors.centerIn: parent
text: qsTr("QML ROCKS!!!")
}
}
}
}
}
}
Using a component defined in a different file you are able to compose it, declaratively, with any other (custom) component thanks to the default property. The overall result of our example is the following. Note how each component is unique in its overall appearence thanks to the numerous aliases we defined, and used. Note also that the component can be composed with itself (by also carefully tuning the margin w.r.t. the given shadow parameters):