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

Question

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

没有 DropShadow：

在我将DropShadow 添加到该矩形之前，一切正常。虽然是在 Rectangle 项之外，但是中和了 Rectangle 左右两边的剪辑效果。

使用 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

最后我写了自己的 Ripple。 它可以在任何地方使用，没有任何问题。

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
                            }

                        }
                    }

                }