Arbitrary and/or animated opacity masks to QGraphicsItems with QGraphicsEffect

Last week I dropped by this neat image slider and was wondering how could that be done in Qt (C++ or Quick). And basically what we need is an animated opacity mask, or “clipper”.

While QGraphicsView and QML already provide rectangular clipping, it does not support clipping to arbitrary forms and opacity, something we would need in order to implement the “moving bars” transition used in the image slider I mentioned above.

I expected QGraphicsEffect to be suitable for that usecase but I had no experience with it, so I decided to try and make a proof of concept effect class that would clip an arbitrary QGraphicsItem to the shape of a bouncing circle.

A more useful class would be one that received as parameter a mask image instead of the “hard-coded” bouncing circle, but I’ll let that as an exercise to those reading 🙂

Code is attached, I complied against Qt 4.6 and it works fine. Just run:

# qmake
# make
# ./effect

l class would be one that received as parameter a mask image instead of the “hard-coded” bouncing circle, but I’ll let that as an exercise to those read.

Download and try it here.

UPDATE:  If your default graphics system is not raster, ie. if you get errors like:

QPainter::setCompositionMode: Blend modes not supported on device

Try running the example as follows:
# ./effect -graphicssystem raster

QPainter::setCompositionMode: Blend modes not supported on device

Leave a Reply