Qml and blurring image

Question

I want to achieve a blur effect using QML. I found references about the "effect: Blur"(Example) but in Qt 4.8 this does not work. As far as I know this is implemented with C++ code. But how?

Answer 1

The effect attribute, wich all visual QML items have, accepts all the effects which are subclasses of QGraphicsEffect. Qt 4.8 ships with QGraphicsBlurEffect, QGraphicsColorizeEffect, QGraphicsDropShadowEffect, and QGraphicsOpacityEffect. Originally these there all available in QML by default, but at one time in development (before the first public release of QtQuick) they were excluded for performance reasons. To make them work again, one has to include the following lines of code in the C++ part of his application, for instance in the main function:

qmlRegisterType<QGraphicsBlurEffect>("Effects",1,0,"Blur");
qmlRegisterType<QGraphicsColorizeEffect>("Effects",1,0,"Colorize");
qmlRegisterType<QGraphicsDropShadowEffect>("Effects",1,0,"DropShadow");
qmlRegisterType<QGraphicsOpacityEffect>("Effects",1,0,"OpacityEffect");

This make these classes available to QML so one can use them like:

import QtQuick 1.1
import Effects 1.0

Item {
    // [...]
    effect: Blur {
        blurRadius: 10.0
    }
}

This works, but in many case the resulting performance is really unacceptable. Then you should try to implement blurring with the help of ShaderEffectItem. That way one can realize graphic effects with GLSL shader programs resulting in GPU rendering which is way faster than the old QGraphicsEffect-based approach.

Answer 2

I don't know what you are talking about, but: Qt ships with an example named Shader Effects. As the name implies, it uses GPU shaders declared inside the QML to achieve all sorts of cool effects.