How to prevent blurry QtGraphicalEffects from being cut off?

Question

qml window with cut-off drop shadow

I'm trying to add effects to my items using QtQuick 2 with QtGraphicalEffects, but I don't quite understand how to tweak really blurry effects to look right.

In this case, the drop shadow is poorly sized and is getting clipped at the edges before it entirely fades away. How can I make it blend in nicely and not get cut off?

This is the code for the window:

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 250
    height: 75

    Text {
        id: textItem
        x: 10; y: 10
        text: "how can I fix my shadow?"
    }

    DropShadow {
        id: shadowEffect
        anchors.fill: textItem
        source: textItem

        radius: 8
        samples: 16

        horizontalOffset: 20
        verticalOffset: 20
    }
}

smooth: true doesn't make any noticeable difference. At least, not to the cut-off edges. — cgmb, Mar 25 '13 at 05:37

score 8 · Accepted Answer · answered Mar 26 '13 at 14:05

You must allow the original item (which will be replicated by the effect) to have enough space around it to allow the effect to be drawn completely, I would do something like this :

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 320;
    height: 240;

    Text {
        id: textItem;
        anchors.centerIn: parent;
        text: "how can I fix my shadow?";

        /* extend the bounding rect to make room for the shadow */
        height: paintedHeight + (shadowEffect.radius * 2);
        width: paintedWidth + (shadowEffect.radius * 2);

        /* center the text to have space on each side of the characters */
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignVCenter;

        /* hide the original item because the Graphical Effect duplicates it anyway */
        visible: false;
    }
    DropShadow {
        id: shadowEffect;
        anchors.fill: source;
        source: textItem;
        radius: 8;
        samples: 16;
        horizontalOffset: 20;
        verticalOffset: 20;
    }
}

This works, though I find it really ugly. I'm still open to a better solution. Still, +1 for the only working solution I've seen. — cgmb, Mar 26 '13 at 15:44
@Slavik81: you won't find any better solution, as the issue is coming from the Qt side it-self, the graphical effect is done by applying a ShaderEffect upon an Item (which is basically an OpenGL texture in QML 2.0) and this ShaderEffect can't draw outside the texture of the Item it is replicating. Maybe you should file a feature request/bug report on QT-BUG server ;-) — TheBootroo, Mar 26 '13 at 16:23

score 2 · Answer 2 · answered Mar 21 '13 at 07:24

2

Qt Graphical Effects are bound to the bounding rect of the item they apply to. Make the bounding rect large enough (maybe using minimum size or whatever ugly solution), so you don't have that "cut-off" appearance

answered Mar 21 '13 at 07:24

azf

2,179
16
22

Thanks. I was beginning to suspect that was the cause. But I still don't know how to fix that problem, let alone how to do it cleanly. Could you elaborate? – cgmb Mar 21 '13 at 17:26
unfortunately I never used QML, and so I won't be able to elaborate that way. I once had same problem with Qt Graphics View framework, and the workaround was to calculate (enlarge) item's bounding rect so that effect is no cut off anymore. Try to force `Text` item size to something large, and see if it changes something – azf Mar 21 '13 at 17:37

How to prevent blurry QtGraphicalEffects from being cut off?

2 Answers2

Linked