CODEWITHSUNDEEP
qtqmlqtquick2
S.M.Mousavi
S.M.Mousavi

Reputation: 5246

How to create a drop shadow for Rectangle

I want to draw a drop shadow for my main, transparent, and no-decorated window, which is a Rectangle.

How can I do that using QtQuick 2.0?

Upvotes: 16

Views: 23748

Answers (4)

stackunderflow
stackunderflow

Reputation: 10682

This is my quick and dirty way of accomplishing a drop shadow effect for a QML Rectangle for the time being:

Rectangle{
    width: 500
    height: 500
    color: "dark grey"

    Rectangle {
        id: backgroundRect
        width: 200
        height: 150
        radius: 5
        anchors.centerIn: parent
        color: "red"

        Rectangle {
            id: dropShadowRect
            property real offset: Math.min(parent.width * 0.025, parent.height * 0.025)
            color: "purple"
            width: parent.width
            height: parent.height
            z: -1
            opacity: 0.75
            radius: backgroundRect.radius + 2
            anchors.left: parent.left
            anchors.leftMargin: -offset
            anchors.top: parent.top
            anchors.topMargin: offset
        }
    }
}

Upvotes: 6

TheBootroo
TheBootroo

Reputation: 7518

As a workaround for the clipped shadow issue, you can put your Rectangle in an Item, with additionnal margin to take blur radius in account, and apply shadow on that container:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 320
    height: 240

    Item {
        id: container
        anchors.centerIn: parent
        width:  rect.width  + (2 * rectShadow.radius)
        height: rect.height + (2 * rectShadow.radius)
        visible: false

        Rectangle {
            id: rect
            width: 100
            height: 50
            color: "orange"
            radius: 7
            antialiasing: true
            border {
                width: 2
                color: "red"
            }
            anchors.centerIn: parent
        }
    }

    DropShadow {
        id: rectShadow
        anchors.fill: source
        cached: true
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 16
        color: "#80000000"
        smooth: true
        source: container
    }
}

Upvotes: 17

Ismael Chivite
Ismael Chivite

Reputation: 1

I tried the code above and it in fact adds a shadow, although in my case simply adding another rectangle with a bit on an offset gave me an effect that I liked more.

Rectangle{

    id: rec_Shadow
    height:rect_withShadow.height
    width: rect_withShadow.width
    border.color: "#B3B3B3"
    color: "#C5C5C5"

    anchors{
            verticalCenter: rect_withShadow.verticalCenter
            horizontalCenter:  rect_withShadow.horizontalCenter
            horizontalCenterOffset: 5
            verticalCenterOffset: 5
        }
    radius: rect_withShadow.radius
}

Next you add the Rectangle on which you want the shadow, and you call it rect_withShadow

Upvotes: 0

cgmb
cgmb

Reputation: 4424

Just use DropShadow from the QtGraphicalEffects module.

A complete, working example:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    width: 640
    height: 480
    color: "blue"

    Rectangle {
        id: rect
        anchors.centerIn: parent
        width: 100
        height: 100
        color: "red"
    }

    DropShadow {
        anchors.fill: rect
        cached: true
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 16
        color: "#80000000"
        source: rect
    }
}

Note that you will see a number of warnings like this:

file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/DropShadow.qml:391:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy: Binding loop detected for property "output" file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianGlow.qml:53:5: QML SourceProxy: Binding loop detected for property "output"

Those warnings are QTBUG-28521, which has been fixed in Qt 5.0.2 (which at the time of this writing has not yet been released). Fortunately, there's no actual problem, aside from the annoying console output.

Upvotes: 9

Related Questions