Conflict in using DropShadow and Ripple

[mmjvox]

I wrote a Ripple item in a Rectangle Item and enabled clip property of the Rectangle to prevent the Ripple drawing get out of that Rectangle.

without DropShadow:

Everything works fine until I add a DropShadow to that Rectangle. Although it is outside the Rectangle item, but it neutralizes the clip effect in left and right side of the Rectangle.

with DropShadow:

Here is my code:

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
import QtQuick.Controls.Material.impl 2.12

Item{
                    width: 400
                    height: 100

                    DropShadow {
                        anchors.fill: itemRect
                            horizontalOffset: 0
                            verticalOffset: 0
                            radius: 12.0
                            samples: 17
                            color: "#50000000"
                            source: itemRect
                        }

                    Rectangle{
                        id:itemRect
                        anchors.fill: parent;
                        anchors.margins: 8;
                        border.width: 1
                        radius: 5;
                        clip: true;


                        MouseArea{
                            id: button
                            anchors.fill: parent
                            onPressed: {
                                ripple.x=mouseX-(ripple.width/2);
                                ripple.y=mouseY-(ripple.height/2);
                            }


                            Ripple {
                                id: ripple
                                clipRadius: 2
                                x:40
                                width: itemRect.width*2
                                height: itemRect.height*2
                                pressed: button.pressed
                                active:  false
                                color: "#10000000"
//                                layer.enabled: true
//                                layer.effect: OpacityMask {
//                                            maskSource: Rectangle
//                                            {
//                                                width: ripple.height
//                                                height: ripple.height
//                                                radius: ripple.height
//                                            }
//                                        }
                            }
                        }
                    }

                }

I tested OpacityMask for layer.effect of Ripple Item. But it didn't have any effects.

[Markkyboy]

try 'layer.effect' and 'layer.enabled' as DropShadow on Rectangle.

I'm certain I did something like this for rows of buttons (buttons made from rectangles) with drop shadows, without it I was getting all kinds of unwanted effects.

Okay, I've found the code I used. I put DropShadow in its own Qml file, then called on it from Rectangle in another file using layer/enabled/effect, here'a snippet;

    Rectangle {
        id: off; width: 30; height: 30; radius: 15; color: "black"; layer.enabled: true; layer.effect: DropShadow {}
        Text { text: "OFF"; color: "white"; font.pixelSize: 12; anchors.centerIn: parent }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                // blah, blah
        }
    }

[mmjvox]

@Markkyboy thanks ,
It does not matter if the buttons are in the row or not.
I think I have tested DropShadow as a layer.effect and it didn't work.
The layer.effect becomes opaque in Android (I don't know why an i opened a topic for it before and no answer was given).

Anyway i wrote my own Ripple. It can be used anywhere without any issues. (It can still be optimized)
https://github.com/mmjvox/Another-Ripple

[Markkyboy]

Interesting.
I tried using your Ripple in Sailfish SDK but I cannot get the type to register, I'm not surprised, but I do like the effect and would like to see it on my phone as part of my home automation projects......effects on certain buttons.

[Behzad.h]

To ensure that the ripple effect is contained within the Rectangle, you need to set the clip property of the MouseArea to true. This way, the ripple effect will not be drawn outside the bounds of the Rectangle.

import QtQuick
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import QtQuick.Controls.Material.impl


Item{
    width: 400
    height: 100
    Rectangle{
        id:itemRect
        anchors.fill: parent;
        anchors.margins: 8;
        border.width: 1
        radius: 5;
        clip: true;
        layer.enabled: true
        layer.effect: DropShadow {
            color: "black"
            spread: 0.2

            horizontalOffset: 0
            verticalOffset: 0
        }
        MouseArea{
            id: button
            anchors.fill: parent
            clip: true
            onPressed: {
                ripple.x=mouseX-(ripple.width/2);
                ripple.y=mouseY-(ripple.height/2);
            }
            Ripple {
                id: ripple
                clipRadius: 2
                x:40
                width: itemRect.width*2
                height: itemRect.height*2
                pressed: button.pressed
                active:  false
                color: "#10000000"
            }
        }
    }

}