我在使用 DropShadow 和 Ripple 时遇到了冲突

Question

我在 Rectangle 项中写了一个 Ripple 项，并启用了矩形的 clip 属性 以防止波纹绘图超出该矩形。

没有投影：

一切正常，直到我向该矩形添加 DropShadow。虽然在Rectangle item之外，但是中和了Rectangle左右两边的clip效果。

使用 DropShadow：

这是我的代码：

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
//                                            }
//                                        }
                            }
                        }
                    }

                }

我测试了 OpacityMask 的 layer.effect 波纹物品。但是没有任何效果。

Answer 1

我终于写了自己的瑞波币。 它可以在任何地方使用，没有任何问题。

https://github.com/mmjvox/Another-Ripple

这是我的代码：

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
import AnotherRipple 1.0

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;
                        
                        SimpleRipple{
                            id: ripple
                            anchors.fill: parent;
                            color: "#50ffa070"
                        }

                        MouseArea{
                            id: button
                            anchors.fill: parent
                            onClicked: {

                                // In this example MouseArea accepts pressed event to provide clicked(released) event.
                                // Ripple can't sense pressed event, so I called pressed method of Ripple.
                        
                                ripple.pressed(mouse.x,mouse.y);
                                
                                // Some Other Operations
                            }

                        }
                    }

                }