MDropShadow.qml

基于上一章所制作的MGaussianBlur.qml 开发 MDropShadow阴影效果

import QtQuick 2.12Item {id: controlproperty var source;property real radius: 4property bool cached: falseproperty int offsetX: 0property int offsetY: 0property color color: "black"MGaussianBlur{id: blurx: control.offsetXy: control.offsetYwidth: control.widthheight: control.heightsource: control.sourceradius: control.radiuscolor: control.coloralphaOnly: trueShaderEffect{x: -control.offsetXy: -control.offsetYwidth: control.widthheight: control.heightproperty var source: control.source}}ShaderEffectSource {width: parent.widthheight: parent.heightvisible: control.cachedsmooth: truesourceItem: blurhideSource: visible}
}

使用

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Column{spacing: 10Row{SpinBox{onValueModified: {blur.radius = value}}}Row{spacing: 10Image {id: imgwidth: 100height: 100source: "qrc:/firefox-logo.svg"}MGaussianBlur{id: blurwidth: 100height: 100source: imgradius: 4//alphaOnly: true}Button{id: img2width: 100text: "edit"//source: "qrc:/firefox-logo.svg"layer.enabled: truelayer.effect: MDropShadow{source: img2radius: 4offsetX: 2offsetY: 2color: Qt.rgba(0,0,0,0.5)}}}}}